We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out

Tailwind CSS Video - React

Use our React and Tailwind CSS video example to display video in your web projects. The video can be used to display media content specially videos on your website.

See below our beautiful video examples that you can use in your Tailwind CSS and React project. The examples also comes in different styles so you can adapt it easily to your needs.

Video Demo

Here's how to implement a simple and responsive video. It can be used to display video content on your website.

Loading...
1export default function VideoDemo() {
2  return (
3    <video className="h-full w-full rounded-lg" controls>
4      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
5      Your browser does not support the video tag.
6    </video>
7  );
8}
9

Video Autoplay

You can use the autoPlay attribute to make the video play automatically when the page loads.

Loading...
1export default function VideoAutoplay() {
2  return (
3    <video className="h-full w-full rounded-lg" controls autoPlay>
4      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
5      Your browser does not support the video tag.
6    </video>
7  );
8}
9

Video Muted

You can use the muted attribute to mute the video.

Loading...
1export default function VideoMuted() {
2  return (
3    <video className="h-full w-full rounded-lg" controls muted>
4      <source src="https://dub.sh/H1glk5b" type="video/mp4" />
5      Your browser does not support the video tag.
6    </video>
7  );
8}
9