Home
Amine Ghanim
Hero Section

Hero Section

This tailwind example is contributed by Amine Ghanim, on 20-Mar-2025. Component is made with Tailwind CSS v3.

Hero

<div class="flex flex-col h-screen">
  
  <div class="text-[17px] px-[180px] py-[24px] bg-white flex justify-between items-center">
    
    <div>
      <h1 class="text-[36px] font-semibold">
        Jewelry <span class="text-[#C8815F]">.</span>
      </h1>
    </div>
    
    <div>
      <ul class="flex gap-[32px]">
        <li class="cursor-pointer">Home</li>
        <li class="cursor-pointer">Shop</li>
        <li class="cursor-pointer">Products</li>
        <li class="cursor-pointer">Pages</li>
        <li class="cursor-pointer">Blog</li>
        <li class="cursor-pointer">Elements</li>
      </ul>
    </div>
    
    <div class="flex gap-[24px]">
      <i class="fas fa-search text-[24px] cursor-pointer"></i>
      <i class="fas fa-user text-[24px] cursor-pointer"></i>
      <i class="far fa-heart text-[24px] cursor-pointer"></i>
      <i class="fas fa-shopping-bag text-[24px] cursor-pointer"></i>
    </div>

</div>

<div class=" flex-1">
    <div
      class=" h-full bg-[url('https://res.cloudinary.com/dkt1t22qc/image/upload/v1742496031/Prestataires_Documents/dygqcsf4puzswq30yssx.png')] bg-cover bg-center bg-no-repeat flex items-center text-white pl-[137px]">
      <div class="flex flex-col">
        <div class="text-[34px] leading-8">Every piece of</div>
        <div class="text-[56px] font-medium mb-4">Jewelry tells a story</div>
        <p class="w-[397px] mb-[40px]">
          “A gentleman knows his appearance is very important that shows his
          characteristic.” - Unknown
        </p>
        <div class="flex gap-[16px]">
          <a href="https://youtu.be/9tdewlwamFw?si=hSfImLajCynDL-2r"> <button class="rounded-[4px] p-[12px] bg-white font-medium text-black">
                Shop Now
            </button></a>
          <button class="rounded-[4px] p-[12px] border-2 border-white text-white font-medium">
                New Items
            </button>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
        data-name="bmc-button" data-slug="amine_gha10" data-color="#FFDD00" data-emoji="" data-font="Bree"
        data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff">
      </script>
    </div>
  </div>

</div>

Related Examples

Hero

Author:
ABDO-SY

10 months ago

1.8k
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Author:
Sudip chaudhary

6 months ago

416
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

7 months ago

1.1k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.6k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

2 months ago

328
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

7 months ago

749
Hero section in react js
hero portfolio section in react js

Author:
SAI BENDE

1 year ago

5.3k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

8 months ago

1.2k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

864
composent clean
composent clean

Author:
Omer fils ELENGA

1 month ago

119
Clean hero section

Author:
OmKar Mehta

1 year ago

3.3k
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

10 months ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components