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>