Create a movie card using Tailwind CSS and one code

Gaurav Web99 — Wed, 10 May 2023 11:08:21 +0000

To create a movie card post using Tailwind CSS CDN and one code, you can follow the steps below:

1.First, you need to link the Tailwind CSS CDN to your HTML file. You can do this by adding the following code to the head section of your HTML file:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-700">
</body>
</html>

2.Inside this code in body, you can create a movie card using the following code:

<div class="m-4 mb-8 w-auto px-4 mx-auto sm:w-1/2 md:w-1/3 lg:w-1/4">
  <div class="rounded-lg bg-white shadow-lg">
    <img src="https://source.unsplash.com/400x500/?dark" alt="movie poster" class="rounded-t-lg" />
    <div class="p-4">
      <h2 class="mb-2 text-lg font-semibold">Movie Title</h2>
      <p class="mb-2 text-sm text-gray-700">Release Date: January 1, 2023</p>
      <p class="mb-4 text-sm text-gray-700">Director: John Doe</p>
      <a href="#" class="block rounded-lg bg-blue-500 px-4 py-2 text-center font-semibold text-white hover:bg-blue-600">Watch Movie</a>
    </div>
  </div>
</div>

3.Replace the image with the movie poster and update the movie title, release date, director, and trailer link as necessary.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-700">
<div class="m-4 mb-8 w-auto px-4 mx-auto sm:w-1/2 md:w-1/3 lg:w-1/4">
  <div class="rounded-lg bg-white shadow-lg">
    <img src="https://source.unsplash.com/400x500/?dark" alt="movie poster" class="rounded-t-lg" />
    <div class="p-4">
      <h2 class="mb-2 text-lg font-semibold">Movie Title</h2>
      <p class="mb-2 text-sm text-gray-700">Release Date: January 1, 2023</p>
      <p class="mb-4 text-sm text-gray-700">Director: John Doe</p>
      <a href="#" class="block rounded-lg bg-blue-500 px-4 py-2 text-center font-semibold text-white hover:bg-blue-600">Watch Movie</a>
    </div>
  </div>
</div>
</body>
</html>

4.Finally, you can customize the movie card's appearance by adjusting the classes used in the HTML code. The classes used in this example are from Tailwind CSS and provide a responsive layout, rounded corners, drop shadows, and color styles.

That's it! You now have a movie card post created using Tailwind CSS CDN and one code.

DEV Community: Gaurav Web99

Create a movie card using Tailwind CSS and one code