Home
Rajesh kulkarni
Video card

Video card

Video card component for tailwind css

This tailwind example is contributed by Rajesh kulkarni, on 05-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Rajesh kulkarni

17.1k

Fork Fullscreen

<div class="flex justify-center">
    <div class="rounded-lg shadow-lg bg-white max-w-sm">
        <a href="#!">
            <video width="320" height="240" controls class="w-full rounded-t-lg">
                <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
                <source src="movie.ogg" type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </a>
        <div class="p-6">
            <h5 class="text-gray-900 text-xl font-medium mb-2">Video Card</h5>
            <p class="text-gray-700 text-base mb-4">
                Some quick example text to build on the card title and make up the bulk of the card's
                content.
            </p>
            <button type="button" class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Button</button>
        </div>
    </div>
</div>

Related Examples

Card grid for posts

Author:
Mr Robot

2 years ago

22k
Hover effect card

Author:
Samuel Dawson

2 years ago

31k
Features grid

Author:
Sophia Baker

2 years ago

10k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

17.7k
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11.3k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

2 years ago

15.3k
Confirmation model

Author:
Mr Robot

3 years ago

13k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

9 months ago

1.8k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

6 months ago

830
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.9k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.7k
Tailwind CSS Book

Author:
Michael Andreuzza

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components