Desain Web HTML sederhana dengan desain web menggunakan Tailwind CSS

Mas Angger


Tentu! Berikut adalah contoh kode HTML sederhana dengan desain web menggunakan Tailwind CSS. Ini adalah landing page minimalis yang bisa kamu gunakan sebagai template dasar untuk website portofolio, produk, atau bisnis:

✅ Contoh Kode HTML + Tailwind CSS

<!DOCTYPE html>

<html lang="id">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Landing Page</title>

  <script src="https://cdn.tailwindcss.com"></script>

</head>

<body class="bg-gray-100 text-gray-800 font-sans">


  <!-- Navbar -->

  <nav class="bg-white shadow-md">

    <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">

      <h1 class="text-2xl font-bold text-indigo-600">BrandName</h1>

      <ul class="flex space-x-6 text-sm font-medium">

        <li><a href="#" class="hover:text-indigo-600">Beranda</a></li>

        <li><a href="#" class="hover:text-indigo-600">Tentang</a></li>

        <li><a href="#" class="hover:text-indigo-600">Layanan</a></li>

        <li><a href="#" class="hover:text-indigo-600">Kontak</a></li>

      </ul>

    </div>

  </nav>


  <!-- Hero Section -->

  <section class="bg-indigo-600 text-white py-20">

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

      <h2 class="text-4xl font-bold mb-4">Selamat Datang di Website Kami</h2>

      <p class="text-lg mb-6">Kami menyediakan solusi terbaik untuk bisnis dan kebutuhan digital Anda.</p>

      <a href="#kontak" class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded-full shadow-md hover:bg-gray-100 transition">Hubungi Kami</a>

    </div>

  </section>


  <!-- Fitur / Layanan -->

  <section class="py-16">

    <div class="max-w-6xl mx-auto px-6 grid md:grid-cols-3 gap-8 text-center">

      <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">

        <h3 class="text-xl font-semibold mb-2">Desain Modern</h3>

        <p>Kami menggunakan teknologi terbaru untuk menciptakan tampilan yang menarik dan fungsional.</p>

      </div>

      <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">

        <h3 class="text-xl font-semibold mb-2">Responsif</h3>

        <p>Website kami dapat diakses dengan baik di berbagai perangkat, baik desktop maupun mobile.</p>

      </div>

      <div class="bg-white p-6 rounded-xl shadow hover:shadow-lg transition">

        <h3 class="text-xl font-semibold mb-2">Cepat & Aman</h3>

        <p>Keamanan dan kecepatan akses adalah prioritas utama dalam setiap proyek yang kami kerjakan.</p>

      </div>

    </div>

  </section>


  <!-- Footer -->

  <footer class="bg-white border-t mt-12 py-6 text-center text-sm text-gray-500">

    © 2025 BrandName. All rights reserved.

  </footer>


</body>

</html>


🔧 Cara Pakai

  1. Simpan kode di atas sebagai file .html, misalnya index.html.

  2. Buka di browser untuk melihat hasilnya.

  3. Edit teks dan warna sesuai brand kamu.

    hasilnya : https://contoh-desainangger.my.canva.site/


0 Comments