tailwind stories

<div class="max-w-2xl mx-auto p-8">
  <h2 class="sm:text-lg sm:leading-snug font-semibold tracking-wide uppercase text-fuchsia-500">Introducing</h2>
  <p class="text-5xl lg:text-6xl leading-none font-extrabold text-gray-900">Tailwind Stories</p>
  <ul class="flex space-x-6">
    <li class="flex flex-col items-center space-y-1">
      <div class="relative bg-gradient-to-tr from-yellow-400 to-fuchsia-600 p-1 rounded-full">
        <a class="block bg-white p-1 rounded-full transform transition hover:-rotate-6" href="#">
          <img class="h-24 w-24 rounded-full" src="https://placekitten.com/200/200" alt="cat" class="" />
        </a>
        <button class="absolute bottom-0 right-1 bg-blue-500 h-8 w-8 rounded-full text-white text-2xl font-semibold border-4 border-white flex justify-center items-center font-mono hover:bg-blue-700">+</button>
      </div>
      <a href="#">You</a>
    </li>
    <li class="flex flex-col items-center space-y-1">
      <div class="bg-gradient-to-tr from-yellow-400 to-fuchsia-600 p-1 rounded-full">
        <a class="block bg-white p-1 rounded-full transform transition hover:-rotate-6" href="#">
          <img class="h-24 w-24 rounded-full" src="https://placekitten.com/203/200" alt="cat" class="" />
        </a>
      </div>
      <a href="#">Kitty two</a>
    </li>
    <li class="flex flex-col items-center space-y-1">
      <div class="bg-gradient-to-tr from-yellow-400 to-fuchsia-600 p-1 rounded-full">
        <a class="block bg-white p-1 rounded-full transform transition hover:-rotate-6" href="#">
          <img class="h-24 w-24 rounded-full" src="https://placekitten.com/202/200" alt="cat" class="" />
        </a>
      </div>
      <a href="#">Kitty three</a>
    </li>
    <li class="flex flex-col items-center space-y-1">
      <div class="bg-gradient-to-tr from-yellow-400 to-fuchsia-600 p-1 rounded-full">
        <a class="block bg-white p-1 rounded-full transform transition hover:-rotate-6" href="#">
          <img class="h-24 w-24 rounded-full" src="https://placekitten.com/201/200" alt="cat" class="" />
        </a>
      </div>
      <a href="#">Kitty four</a>
    </li>
  </ul>
</div>