Home
Dipti narayan
Hero section with sample code

Hero section with sample code

Show sample code of your digital product

This tailwind example is contributed by Dipti narayan, on 06-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Copy code block, Code preview section, Command Preview

Hero Code block

Author Dipti narayan

10k

Fork Fullscreen

<div class="max-w-screen-xl px-4 mx-auto mt-8 sm:mt-12 sm:px-6 md:mt-16">
  <div class="lg:grid lg:grid-cols-12 lg:gap-8">
    <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
      <div class="text-sm font-semibold tracking-wide text-gray-500 uppercase sm:text-base lg:text-sm xl:text-base">
        New version 3
      </div>
      <h2
        class="mt-1 text-4xl font-extrabold leading-10 tracking-tight text-gray-900 sm:leading-none sm:text-6xl lg:text-5xl xl:text-6xl">
        DataGuard Pro
      </h2>
      <p class="mt-3 text-base text-gray-600 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
        DataGuard Pro is a cutting-edge data protection and security software solution designed to safeguard your
        sensitive information and keep your digital assets secure.
      </p>
      <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
        <div class="rounded-md shadow">
          <a href="/docs"
            class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-500 focus:outline-none focus:shadow-outline md:py-4 md:text-lg md:px-10">
            Documentation
          </a>
        </div>
        <div class="mt-3 sm:mt-0 sm:ml-3">
          <a href=""
            class="flex items-center justify-center w-full px-8 py-3 text-base font-medium leading-6 text-indigo-700 transition duration-150 ease-in-out bg-indigo-100 border border-transparent rounded-md hover:text-indigo-600 hover:bg-indigo-50 focus:outline-none focus:shadow-outline focus:border-indigo-300 md:py-4 md:text-lg md:px-10">
            Tutorial
          </a>
        </div>
      </div>
    </div>
    <div
      class="relative mt-12 sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
      <svg
        class="absolute top-0 hidden origin-top transform scale-75 -translate-x-1/2 -translate-y-8 left-1/2 sm:scale-100 lg:hidden"
        width="640" height="784" fill="none" viewBox="0 0 640 784">
        <defs>
          <pattern id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e" x="118" y="0" width="20" height="20"
            patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"></rect>
          </pattern>
        </defs>
        <rect y="72" width="640" height="640" class="text-gray-50" fill="currentColor"></rect>
        <rect x="118" width="404" height="784" fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"></rect>
      </svg>
      <div class="relative justify-end hidden w-full lg:flex">
        <div
          class="flex justify-end inline-block p-8 pr-8 text-base leading-relaxed text-blue-400 bg-indigo-900 rounded-lg shadow-lg xl:text-lg xl:pr-16">
          <pre><span class="text-blue-100">// Create a tenant</span>
$tenant = Tenant::create();
$tenant-&gt;createDomain([
  'domain' =&gt; 'acme.com',
]);

<span class="text-blue-100">// Write your app like you're used to</span>
Order::where('status', 'shipped')-&gt;get();
Cache::get('order_count');
asset('logo.png');
dispatch(new SendOrderCreatedMail);</pre>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Copy code block
showcase command-line instructions or code examples. It provides a clear distinction between code content and other elements.

Author:
Sienna

2 years ago

33.1k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

2 years ago

18.4k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

2 years ago

10.2k
Basic hero section

Author:
Lîmåã M

2 years ago

16.2k
Background image section

Author:
Charlotte Dupont

2 years ago

18.8k
hero section

Author:
Anonymous

1 year ago

9.6k
Section for coping code / command

Author:
Kofi Osei

2 years ago

9.3k
Hero section with fancy heading

Author:
Laurits

3 years ago

11.9k
Hero section with button

Author:
Samuel Dawson

2 years ago

12.4k
Beautiful Hero Section

Author:
Brandon D

3 years ago

14.9k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 days ago

40
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

8 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components