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 v3.4. It is responsive. similar terms for this example are Copy code block, Code preview section, Command Preview

Hero Code block

Author Dipti narayan

Tailwind v3.4 10.5k 18

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.

Sienna

3 years ago

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

Alok

3 years ago

19.3k
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.

Vikram Choudhary

2 years ago

11.8k
Basic hero section

Lîmåã M

3 years ago

17.4k
Background image section

Charlotte Dupont

3 years ago

20.1k
hero section

Anonymous

2 years ago

10.4k
Section for coping code / command

Kofi Osei

3 years ago

9.7k
Hero section with fancy heading

Laurits

3 years ago

12.7k
Hero section with button

Samuel Dawson

3 years ago

13.4k
Beautiful Hero Section

Brandon D

4 years ago

16.1k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

6 months ago

458
joker
joker cyber punk

Baraka Salvator

1 year ago

2k