The Ice Cold Tailwind UI kit for your next project

Pick. Copy. Paste.

<!-- Article card 1; light with dark variant -->
<div class="overflow-hidden rounded-md bg-glacier-50 dark:bg-glacier-800 shadow shadow-glacier-400 dark:shadow-glacier-900">
  <a href="#" class="">
    <img class="h-60 w-full object-cover hover:opacity-90 duration-300" src="https://images.unsplash.com/photo-1531366936337-7c912a4589a7?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170" loading="lazy" alt="" />
  </a>
  <div class="p-8">
    <div class="text-sm font-semibold uppercase tracking-wide text-glacier-darkblue">Travel</div>
    <a href="#" class="mt-1 block text-lg font-medium leading-tight text-glacier-800 dark:text-glacier-100 hover:underline">Best times to see the Northern Lights</a>
    <p class="mt-2 max-w-prose text-glacier-600 dark:text-glacier-400">When and where can you see the Northern Lights? All you need to know!</p>
  </div>
</div>