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.6k

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

3 years ago

22.9k
Hover effect card

Author:
Samuel Dawson

3 years ago

32.3k
Features grid

Author:
Sophia Baker

3 years ago

10.2k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

18.8k
Card with Thumbnail
Post card with image

Author:
Mr Robot

3 years ago

11.5k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

3 years ago

15.9k
Greeting Card with CTA
card with two actions with greeting msg according to time

Author:
Amit Pachange

2 years ago

7.9k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

1 year ago

2.8k
3D Interactive Premium Card
This sleek, modern UI card elevates the standard design with a three-dimensional, interactive experience. Utilizing a subtle 3D parallax tilt that responds to your mouse movement and a smooth, sweeping light-refraction effect on hover, the card instantly communicates premium quality and technical sophistication. It's built for presenting key metrics and deployment actions with dynamic flair.

Author:
CodewithFaraz

3 months ago

413
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

10 months ago

1.4k
card

Author:
Raul antonio de la cruz hernandez

1 month ago

106
Profit Card
Profit card with deatils

Author:
dongol heart

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components