Video Card design in Tailwind by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <div class="mx-auto my-10 grid max-w-screen-xl gap-y-8 sm:grid-cols-2 lg:grid-cols-3"> <div class="mx-2 rounded-xl bg-gray-100"></div> <div class="group cursor mx-4 overflow-hidden rounded-2xl bg-white shadow-xl duration-200 hover:-translate-y-4"> <div class="flex h-60 flex-col justify-between overflow-hidden"> <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?q=80&w=2836&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" /> </div> <div class="flex-1 overflow-hidden bg-white px-6 py-8"> <h5 class="group-hover:text-indigo-600 mb-4 text-xl font-bold">Video 1: Learn more about Web Devlopment</h5> <p class="mb-8 text-gray-600">Web development is the work involved in developing a website for the Internet or an intranet.</p> <div class="flex justify-between"> <a href="#" class="group text-lg font-bold focus:text-indigo-600 hover:text-indigo-600"> <span>▷</span> <span class="underline">Watch Now</span> </a> <div class="max-w-full flex-none lg:px-4"> <h5 class="text-lg font-bold">Video 1</h5> </div> </div> </div> </div> <div class="mx-2 rounded-xl bg-gray-100"></div> </div> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Video Card design component in Tailwind CSS. Best for displaying video intros on the landing page with featured image, post date, title, summary, and author name.. Catagory Tailwind Tags CSS Card Product Card Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script>
