Introduction#

This demo shows different ways to create a hero section

  • Hero section with image demo or here
  • Hero section with loop video
  • Font added in Taildwind

Project Struct#

Create a new project with Taildwind and CSS

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Below is the project structure

|--src 
   |--hero-image-bg.html 
   |--hero-image.html 
   |--hero-video.html 
   |--input.css 
   |--masthead.m4v
   |--masthead-poster.jpg 
   |--control.js 
|--dist 
   |--output.css 
|--tailwind.config.js 
|--package.json

Hero Section Image#

First option is use the image as background and leverage absolute and relative position

<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../dist/output.css" />
    <script src="./control.js"></script>
  </head>


  <body>
    <div
      class="relative h-80 flex justify-center items-center dark:bg-slate-800"
    >
      <div
        class="absolute w-full h-full bg-[url('https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg')] bg-no-repeat bg-cover opacity-30"
      ></div>
      <h1 class="z-10 text-3xl font-semibold dark:text-white">
        Web Development on AWS
      </h1>
    </div>
  </body>
</html>

Second option is to use image directly with z-layer index

<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../dist/output.css" />
    <script src="./control.js"></script>
  </head>


  <body>
    <div class="relative h-80 flex justify-center items-center">
      <img
        src="https://d2cvlmmg8c0xrp.cloudfront.net/web-css/singapore.jpg"
        class="absolute w-full h-full object-cover"
      />
      <h1 class="z-10 text-3xl font-semibold">Web Development on AWS</h1>
    </div>
  </body>
</html>

Hero Section Video#

<!DOCTYPE html>
<html class="dark">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../dist/output.css" />
    <script src="./control.js"></script>
  </head>


  <body>
    <div
      class="relative h-80 flex justify-center items-center dark:bg-slate-800"
    >
      <div class="absolute w-full h-full overflow-hidden">
        <video
          poster="/masthead-poster.jpg"
          autoplay="autoplay"
          loop="loop"
          muted="muted"
          playsinline
          class="absolute inset-0 min-w-full min-h-full object-cover opacity-30"
        >
          <source src="./masthead.m4v" />
        </video>
      </div>
      <h1 class="z-10 text-3xl font-semibold dark:text-white">
        Web Development on AWS
      </h1>
    </div>
  </body>
</html>

Add Font#

First import the font into the global.css or input.css in this case

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;500;700&display=swap");

Let add M PLUS Rounded font for the hero text by modifying the tailwind.config.js

module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
        fontFamily: {
        mplus: ["'M PLUS Rounded 1c'", 'Verdana', 'sans-serif']
      }
    },
  },
  plugins: [],
}

then use the font within Taildwind as normal

<h1 class="z-10 text-3xl font-semibold dark:text-white font-mplus">
 Web Development on AWS
</h1>