yieldUIyieldUIEarly Access

Hey there!

On this site, I share a growing collection of Tailwind CSS components that I create for my side projects.

It is in a very early stage. Both the site and the components on it are going to change a lot. You are welcome to explore and use everything you see already.

If you have any feedback or suggestions, please hit me up on Twitter. Thanks!

– Dom

Picture of the author
Dom Habersack@domhabersack

Button

<button class="bg-blue-600 border border-transparent font-medium text-white px-3.5 py-2 rounded-md shadow-sm text-sm whitespace-nowrap disabled:bg-gray-300 disabled:shadow-none disabled:text-gray-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Button
</button>

Checkbox

<input
  class="border-gray-300 cursor-pointer block h-6 m-0 rounded text-indigo-500 w-6 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-offset-transparent focus:ring-opacity-50"
  type="checkbox"
/>

Checkbox with label

<div class="flex items-center">
  <input
    class="border-gray-300 cursor-pointer block h-6 m-0 rounded text-indigo-500 w-6 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-offset-transparent focus:ring-opacity-50"
    type="checkbox"
    id="consent"
  />
  
  <label
    class="block font-medium text-gray-700 text-sm dark:text-gray-200"
    for="consent"
  >
    I accept the Terms and Conditions.
  </label>
</div>

Input

<input
  class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-3 py-2 text-base"
  placeholder="Placeholder"
  type="text"
/>

Input with label

<div>
  <label
    class="block font-medium text-gray-700 text-sm dark:text-gray-200"
    for="name"
  >
    Name
  </label>
  
  <input
    class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-3 py-2 text-base"
    id="name"
    placeholder="Placeholder"
    type="text"
  />
</div>

Input (small)

<input
  class="appearance-none bg-white border border-gray-300 rounded-md shadow-sm text-gray-600 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-300 px-2.5 py-2 text-sm"
  placeholder="Placeholder"
  type="text"
/>

Input with prefix

https://
<div class="flex rounded-md shadow-sm">
  <span class="bg-gray-50 border border-gray-300 border-r-0 inline-flex items-center px-3 rounded-l-md text-gray-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
    https://
  </span>
  
  <input
    class="appearance-none bg-white border border-gray-300 px-3 py-2 rounded-l-none rounded-r-md text-base text-gray-700 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-200"
    placeholder="www.example.com"
    type="text"
  />
</div>

Input with prefix and label

https://
<div>
  <label class="block font-medium text-gray-700 text-sm dark:text-gray-200">
    Website
  </label>
  
  <div class="flex rounded-md shadow-sm">
    <span class="bg-gray-50 border border-gray-300 border-r-0 inline-flex items-center px-3 rounded-l-md text-gray-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
      https://
    </span>
    
    <input
      class="appearance-none bg-white border border-gray-300 px-3 py-2 rounded-l-none rounded-r-md text-base text-gray-700 w-full focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white dark:bg-black dark:border-gray-700 dark:text-gray-200"
      placeholder="www.example.com"
      type="text"
    />
  </div>
</div>

Card

This is a card.

<div class="bg-white overflow-hidden rounded shadow-sm text-gray-600 w-full dark:bg-black dark:text-gray-300">
  <p class="px-4 py-3">
    This is a card.
  </p>
</div>

Card with header

An island resort

Peninsula Resort and Spa

Beautiful, spacious rooms with an ocean view. Rates from $109/night.

<div class="bg-white overflow-hidden rounded shadow-sm text-gray-600 w-full dark:bg-black dark:text-gray-300">
  <img
    alt="An island resort"
    src="/hero-pool.jpg"
  />
  
  <div class="px-4 py-3">
    <h1 class="font-bold leading-snug mb-1.5 text-base text-gray-700 dark:text-gray-200">
      Peninsula Resort and Spa
    </h1>
    
    <p class="mb-6 text-sm">
      Beautiful, spacious rooms with an ocean view. Rates from $109/night.
    </p>
    
    <button class="bg-blue-600 border border-transparent font-medium text-white px-3.5 py-2 rounded-md shadow-sm text-sm whitespace-nowrap disabled:bg-gray-300 disabled:shadow-none disabled:text-gray-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
      Book now
    </button>
  </div>
</div>

Profile

Dom HabersackContent Creator & Indie Hacker
<div class="flex items-center space-x-2.5">
  <img
    class="border-2 border-white h-10 w-10 rounded-full"
    src="/dom.jpg"
  />
  
  <div class="flex flex-col text-xs space-y-0.5">
    <span class="text-gray-600 dark:text-gray-300 font-bold">
      Dom Habersack
    </span>
    
    <span class="text-gray-500 dark:text-gray-400">
      Content Creator & Indie Hacker
    </span>
  </div>
</div>

Tag

<a
  class="bg-gray-200 inline-block px-2 py-1.5 rounded text-gray-600 text-xs whitespace-nowrap visited:text-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:visited:text-gray-300"
  href="https://domhabersack/firetips/tags/javascript"
>
  JavaScript
</a>

Toggle

<label class="bg-gray-300 cursor-pointer h-6 inline-block relative rounded-full w-10 dark:bg-gray-700">
  <input
    class="hidden"
    type="checkbox"
  />
  
  <div class="absolute bg-white h-5 rounded-full shadow-md top-0.5 w-5 left-0.5">
    <span class="sr-only">
      Toggle
    </span>
  </div>
</label>

Banner

Check out our Black Friday Sale!

<div class="bg-amber-300 flex justify-center px-4 py-3 text-gray-800 w-full">
  <p>
    Check out our Black Friday Sale!
  </p>
</div>