Visual Hierarchy Demo

by oktaviardi pratama

HTML

<!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!--
    60% = Primary Color
    Digunakan untuk background utama
  -->
  <section class="min-h-screen">

    <!-- Navigation -->
    <nav class="max-w-6xl mx-auto px-6 py-6 flex justify-between items-center">
      <h1 class="text-xl font-bold">
        MiniStore
      </h1>

      <button
        class="bg-accent px-4 py-2 rounded-lg font-semibold">
        Login
      </button>
    </nav>

    <!-- Hero Section -->
    <section
      class="max-w-6xl mx-auto px-6 py-20">

      <!--
        VISUAL HIERARCHY LEVEL 1
        Heading paling penting
      -->
      <h1
        class="text-4xl md:text-6xl font-bold leading-tight max-w-3xl">
        Build Better Products
        With Modern Design System
      </h1>

      <!--
        VISUAL HIERARCHY LEVEL 2
        Subheading
      -->
      <p
        class="text-base md:text-xl text-gray-300 mt-6 max-w-2xl">

        Konsisten, scalable, dan mudah dikelola menggunakan
        Tailwind CSS Design System.

      </p>

      <!--
        VISUAL HIERARCHY LEVEL 3
        CTA paling menonjol menggunakan Accent Color
      -->
      <div class="mt-8 flex gap-4 flex-wrap">

        <button
          class="bg-accent px-6 py-3 rounded-lg font-semibold text-black">

          Start Free Trial

        </button>

        <button
          class="border border-gray-500 px-6 py-3 rounded-lg">

          Learn More

        </button>

      </div>

    </section>

    <!--
      30% = Secondary Color
      Digunakan untuk area pendukung
    -->
    <section class="bg-secondary py-20">

      <div class="max-w-6xl mx-auto px-6">

        <h2 class="text-3xl font-bold text-center">
          Why Choose Us?
        </h2>

        <p
          class="text-gray-300 text-center mt-3 text-base">

          Contoh penggunaan warna sekunder sebagai area pendukung.

   ...

JavaScript

tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: "#111827",
            secondary: "#1F2937",
            accent: "#22C55E",
          }
        }
      }
    }