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 v3.4. It is responsive.

Card

Author Rajesh kulkarni

Tailwind v3.4 18.3k 19

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

Mr Robot

3 years ago

24.2k
Hover effect card

Samuel Dawson

3 years ago

33.3k
Features grid

Sophia Baker

3 years ago

10.9k
Ribbon at Corner

Mohit Prajapati

4 years ago

19.6k
Card with Thumbnail
Post card with image

Mr Robot

4 years ago

12k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Chats Message Screen in neomorphism
light/dark chat screen

Akram Khan

2 years ago

2.9k
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Developer Kwame

2 years ago

2.6k
Professional Plan
Professional Plan

Muzammil Riaz

1 year ago

708
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Product card for e-commerce
A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

Maxim

1 year ago

2.2k
offer card

ABDO-SY

1 year ago

1.5k