Web Stories

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded-md bg-white shadow w-8/12 max-w-xl p-6">
    <h1 class="text-lg font-semibold mb-4">Stories for you</h1>
    <div class="flex items-center w-full">
      <ul class="flex">
        <li class="rounded-full p-1 border-2 cursor-pointer mx-1"><img src="https://uifaces.co/our-content/donated/bUkmHPKs.jpg" class="w-16 h-16 rounded-full"></li>
        <li class="rounded-full p-1 border-2 border-blue-500 cursor-pointer mx-2 relative">
          <div class="absolute w-4 h-4 bg-blue-500 right-0 rounded-full border-2 border-white"></div><img src="https://images.pexels.com/photos/61100/pexels-photo-61100.jpeg?crop=faces&fit=crop&h=200&w=200&auto=compress&cs=tinysrgb" class="w-16 h-16 rounded-full">
        </li>
        <li class="rounded-full p-1 border-2 border-blue-500 cursor-pointer mx-2 relative">
          <div class="absolute w-4 h-4 bg-blue-500 right-0 rounded-full border-2 border-white"></div><img src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=d1ff5086e5ca75cda4bcc8e470d8af11" class="w-16 h-16 rounded-full">
        </li>
        <li class="rounded-full p-1 border-2 border-blue-500 cursor-pointer mx-2 relative">
          <div class="absolute w-4 h-4 bg-blue-500 right-0 rounded-full border-2 border-white"></div><img src="https://images.unsplash.com/photo-1521587765099-8835e7201186?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" class="w-16 h-16 rounded-full">
        </li>
        <li class="rounded-full p-1 border-2 cursor-pointer mx-2 relative opacity-50"><img src="https://images.pexels.com/photos/459947/pexels-photo-459947.jpeg?crop=faces&fit=crop&h=200&w=200&auto=compress&cs=tinysrgb" class="w-16 h-16 rounded-full"></li>
      </ul>
    </div>
  </div>
</div>