pweb4.ishaqadhel.com/product.html
pweb4.ishaqadhel.com/product-detail.html
pweb4.ishaqadhel.com/checkout.html
https://github.com/ishaqadhel/pweb-homework-4
Pada Tugas Ke-4 Saya ditugaskan untuk membuat store front e-commerce untuk berjualan secara online. Untuk tugas ini cukup static tidak perlu backend. Untuk menyelesaikan tugas ini saya menggunakan HTML dan TailwindCSS.
pweb4.ishaqadhel.com/product.html
pweb4.ishaqadhel.com/product-detail.html
pweb4.ishaqadhel.com/checkout.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="<https://cdn.tailwindcss.com>"></script>
<title>Drakuli</title>
</head>
<body>
<!-- nav -->
<div class="bg-white">
<header class="relative z-10">
<nav aria-label="Top">
<!-- Top navigation -->
<div class="bg-gray-900">
<div
class="flex items-center justify-between h-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
>
<!-- Currency selector -->
<form class="hidden lg:block lg:flex-1">
<div class="flex">
<label
for="desktop-currency"
class="sr-only"
>Currency</label
>
<div
class="relative -ml-2 bg-gray-900 border-transparent rounded-md group focus-within:ring-2 focus-within:ring-white"
>
<select
id="desktop-currency"
name="currency"
class="bg-none bg-gray-900 border-transparent rounded-md py-0.5 pl-2 pr-5 flex items-center text-sm font-medium text-white group-hover:text-gray-100 focus:outline-none focus:ring-0 focus:border-transparent"
>
<option>IDR</option>
</select>
<div
class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
>
<svg
aria-hidden="true"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 20 20"
class="w-5 h-5 text-gray-300"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M6 8l4 4 4-4"
/>
</svg>
</div>
</div>
</div>
</form>
<p
class="flex-1 text-sm font-medium text-center text-white lg:flex-none"
>
Dapatkan Voucher Gratis Ongkir Sampai 100%
</p>
<div
class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6"
>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Buat Akun</a
>
<span
class="w-px h-6 bg-gray-600"
aria-hidden="true"
></span>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Masuk Akun</a
>
</div>
</div>
</div>
<!-- Secondary navigation -->
<div class="bg-white">
<div class="border-b border-gray-200">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div
class="flex items-center justify-between h-16"
>
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:items-center">
<a href="#">
<span class="sr-only"
>Workflow</span
>
<img
class="w-auto h-8"
src="../img/logo-width.png"
alt="Logo Drakuli"
/>
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Mega menus -->
<div class="ml-8">
<div
class="flex justify-center h-full space-x-8"
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Beranda</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Katalog</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Tentang Kami</a
>
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div
class="flex items-center flex-1 lg:hidden"
>
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button
type="button"
class="p-2 -ml-2 text-gray-400 bg-white rounded-md"
>
<span class="sr-only"
>Open menu</span
>
<!-- Heroicon name: outline/menu -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<span class="sr-only">Workflow</span>
<img
src="../img/logo-width.png"
alt="Logo Drakuli"
class="w-auto h-8"
/>
</a>
<div
class="flex items-center justify-end flex-1"
>
<div class="flex items-center lg:ml-8">
<div class="flex space-x-8">
<div class="flex">
<a
href="#"
class="p-2 -m-2 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Account</span
>
<!-- Heroicon name: outline/user -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
</div>
</div>
<span
class="w-px h-6 mx-4 bg-gray-200 lg:mx-6"
aria-hidden="true"
></span>
<div class="flow-root">
<a
href="#"
class="flex items-center p-2 -m-2 group"
>
<!-- Heroicon name: outline/shopping-cart -->
<svg
class="flex-shrink-0 w-6 h-6 text-gray-400 group-hover:text-gray-500"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<span
class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800"
>0</span
>
<span class="sr-only"
>items in cart, view
bag</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Nav -->
<main>
<!-- Hero -->
<div class="flex flex-col border-b border-gray-200 lg:border-0">
<nav aria-label="Offers" class="order-last lg:order-first">
<div class="mx-auto max-w-7xl lg:px-8">
<ul
role="list"
class="grid grid-cols-1 divide-y divide-gray-200 lg:grid-cols-3 lg:divide-y-0 lg:divide-x"
>
<li class="flex flex-col">
<a
href="#"
class="relative flex flex-col justify-center flex-1 px-4 py-6 text-center bg-white focus:z-10"
>
<p class="text-sm text-gray-500">
Promo Pengguna Baru
</p>
<p class="font-semibold text-gray-900">
Dapatkan voucher senilai 1 Juta
Rupiah
</p>
</a>
</li>
<li class="flex flex-col">
<a
href="#"
class="relative flex flex-col justify-center flex-1 px-4 py-6 text-center bg-white focus:z-10"
>
<p class="text-sm text-gray-500">
Promo Akhir Tahun
</p>
<p class="font-semibold text-gray-900">
Dapatkan potongan lebih dari 50%
</p>
</a>
</li>
<li class="flex flex-col">
<a
href="#"
class="relative flex flex-col justify-center flex-1 px-4 py-6 text-center bg-white focus:z-10"
>
<p class="text-sm text-gray-500">
Ikuti berita dari kami
</p>
<p class="font-semibold text-gray-900">
Dapatkan hadiah menarik dari undian
</p>
</a>
</li>
</ul>
</div>
</nav>
<div class="relative">
<div
aria-hidden="true"
class="absolute hidden w-1/2 h-full bg-gray-100 lg:block"
></div>
<div class="relative bg-gray-100 lg:bg-transparent">
<div
class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8 lg:grid lg:grid-cols-2"
>
<div
class="max-w-2xl py-24 mx-auto lg:py-64 lg:max-w-none"
>
<div class="lg:pr-16">
<h1
class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl xl:text-6xl"
>
Surganya para gamers di Indonesia
</h1>
<p class="mt-4 text-xl text-gray-600">
Kami Drakuli, hadir untuk para
gamers di Indonesia dapat bisa
menemukan games favorit yang mereka
ingin mainkan.
</p>
<div class="mt-6">
<a
href="#"
class="inline-block px-8 py-3 font-medium text-white border border-transparent rounded-md bg-red-600 hover:bg-red-700"
>Lihat Katalog</a
>
</div>
</div>
</div>
</div>
</div>
<div
class="w-full h-48 sm:h-64 lg:absolute lg:top-0 lg:right-0 lg:w-1/2 lg:h-full"
>
<img
src="../img/gamingBackground.jpg"
alt=""
class="object-cover object-center w-full h-full"
/>
</div>
</div>
</div>
<!-- Trending products -->
<section aria-labelledby="trending-heading" class="bg-white">
<div
class="py-16 sm:py-24 lg:max-w-7xl lg:mx-auto lg:py-32 lg:px-8"
>
<div
class="flex items-center justify-between px-4 sm:px-6 lg:px-0"
>
<h2
id="trending-heading"
class="text-2xl font-extrabold tracking-tight text-gray-900"
>
Trending products
</h2>
<a
href="#"
class="hidden text-sm font-semibold text-red-6bg-red-600 sm:block hover:text-red-500"
>Lihat Semua Produk<span aria-hidden="true">
→</span
></a
>
</div>
<div class="relative mt-8">
<div class="relative w-full overflow-x-auto">
<ul
role="list"
class="grid grid-cols-1 mx-4 space-x-8 sm:mx-6 lg:mx-0 lg:space-x-0 md:grid-cols-3 lg:grid-cols-4 gap-x-8"
>
<!-- Loop Here -->
<li
class="inline-flex flex-col text-center lg:w-auto"
>
<div class="relative group">
<div
class="w-full overflow-hidden bg-gray-200 rounded-md aspect-w-1 aspect-h-1"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/home-page-02-product-01.jpg>"
alt="Black machined steel pen with hexagonal grip and small white logo at top."
class="object-cover object-center w-full h-full group-hover:opacity-75"
/>
</div>
<div class="mt-6">
<p
class="text-sm text-gray-500"
>
Black
</p>
<h3
class="mt-1 font-semibold text-gray-900"
>
<a href="#">
<span
class="absolute inset-0"
></span>
Machined Pen
</a>
</h3>
<p class="mt-1 text-gray-900">
Rp 3,500,000
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="px-4 mt-12 sm:hidden">
<a
href="#"
class="text-sm font-semibold text-red-6bg-red-600 hover:text-red-500"
>See everything<span aria-hidden="true">
→</span
></a
>
</div>
</div>
</section>
<!-- Collections -->
<section
aria-labelledby="collections-heading"
class="bg-gray-100"
>
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div
class="max-w-2xl py-16 mx-auto sm:py-24 lg:py-32 lg:max-w-none"
>
<h2
id="collections-heading"
class="text-2xl font-extrabold text-gray-900"
>
Koleksi Kami
</h2>
<div
class="mt-6 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-6"
>
<div class="relative group">
<div
class="relative w-full overflow-hidden bg-white rounded-lg h-80 group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1"
>
<img
src="../img/ps5.jpg"
alt="Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug."
class="object-cover object-center w-full h-full"
/>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span
class="absolute inset-0"
></span>
Games dan Console
</a>
</h3>
<p
class="text-base font-semibold text-gray-900"
>
Alat dan Games dari Console maupun PC
</p>
</div>
<div class="relative group">
<div
class="relative w-full overflow-hidden bg-white rounded-lg h-80 group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1"
>
<img
src="../img/VR.jpg"
alt="Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant."
class="object-cover object-center w-full h-full"
/>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span
class="absolute inset-0"
></span>
Accessories
</a>
</h3>
<p
class="text-base font-semibold text-gray-900"
>
Alat pelengkap permainanmu
</p>
</div>
<div class="relative group">
<div
class="relative w-full overflow-hidden bg-white rounded-lg h-80 group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1"
>
<img
src="../img/actionFigure.jpg"
alt="Collection of four insulated travel bottles on wooden shelf."
class="object-cover object-center w-full h-full"
/>
</div>
<h3 class="mt-6 text-sm text-gray-500">
<a href="#">
<span
class="absolute inset-0"
></span>
Miniature
</a>
</h3>
<p
class="text-base font-semibold text-gray-900"
>
Karakter figur dari games kesayangan
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Sale and testimonials -->
<div class="relative overflow-hidden">
<!-- Decorative background image and gradient -->
<div aria-hidden="true" class="absolute inset-0">
<div
class="absolute inset-0 mx-auto overflow-hidden max-w-7xl xl:px-8"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/home-page-02-sale-full-width.jpg>"
alt=""
class="object-cover object-center w-full h-full"
/>
</div>
<div
class="absolute inset-0 bg-white bg-opacity-75"
></div>
<div
class="absolute inset-0 bg-gradient-to-t from-white via-white"
></div>
</div>
<!-- Sale -->
<section
aria-labelledby="sale-heading"
class="relative flex flex-col items-center px-4 pt-32 mx-auto text-center max-w-7xl sm:px-6 lg:px-8"
>
<div class="max-w-2xl mx-auto lg:max-w-none">
<h2
id="sale-heading"
class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl"
>
Dapatkan Promo Menarik Seumur Hidup
</h2>
<p
class="max-w-xl mx-auto mt-4 text-xl text-gray-600"
>
Produk dari toko kami sangat terbatas, buruan
daftar untuk mendapatkan produk limited-edition.
</p>
<a
href="#"
class="inline-block w-full px-8 py-3 mt-6 font-medium text-white bg-gray-900 border border-transparent rounded-md hover:bg-gray-800 sm:w-auto"
>Dapatkan Promo Menarik</a
>
</div>
</section>
<!-- Testimonials -->
<section
aria-labelledby="testimonial-heading"
class="relative px-4 py-24 mx-auto max-w-7xl sm:px-6 lg:py-32 lg:px-8"
>
<div class="max-w-2xl mx-auto lg:max-w-none">
<h2
id="testimonial-heading"
class="text-2xl font-extrabold tracking-tight text-gray-900"
>
Apa Kata Orang?
</h2>
<div
class="mt-16 space-y-16 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"
>
<blockquote class="sm:flex lg:block">
<svg
width="24"
height="18"
viewBox="0 0 24 18"
xmlns="<http://www.w3.org/2000/svg>"
aria-hidden="true"
class="flex-shrink-0 text-gray-300"
>
<path
d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
fill="currentColor"
/>
</svg>
<div
class="mt-8 sm:mt-0 sm:ml-6 lg:mt-10 lg:ml-0"
>
<p class="text-lg text-gray-600">
Wahhh pelayanan disini cepat, produk
dikirim dengan kemasan yang rapi,
top deh drakuli!
</p>
<cite
class="block mt-4 not-italic font-semibold text-gray-900"
>
Nam Do Shaq, J-Town
</cite>
</div>
</blockquote>
<blockquote class="sm:flex lg:block">
<svg
width="24"
height="18"
viewBox="0 0 24 18"
xmlns="<http://www.w3.org/2000/svg>"
aria-hidden="true"
class="flex-shrink-0 text-gray-300"
>
<path
d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
fill="currentColor"
/>
</svg>
<div
class="mt-8 sm:mt-0 sm:ml-6 lg:mt-10 lg:ml-0"
>
<p class="text-lg text-gray-600">
Wahhh pelayanan disini cepat, produk
dikirim dengan kemasan yang rapi,
top deh drakuli!
</p>
<cite
class="block mt-4 not-italic font-semibold text-gray-900"
>
Mamang Ubay, Warkop Tangerang
</cite>
</div>
</blockquote>
<blockquote class="sm:flex lg:block">
<svg
width="24"
height="18"
viewBox="0 0 24 18"
xmlns="<http://www.w3.org/2000/svg>"
aria-hidden="true"
class="flex-shrink-0 text-gray-300"
>
<path
d="M0 18h8.7v-5.555c-.024-3.906 1.113-6.841 2.892-9.68L6.452 0C3.188 2.644-.026 7.86 0 12.469V18zm12.408 0h8.7v-5.555C21.083 8.539 22.22 5.604 24 2.765L18.859 0c-3.263 2.644-6.476 7.86-6.451 12.469V18z"
fill="currentColor"
/>
</svg>
<div
class="mt-8 sm:mt-0 sm:ml-6 lg:mt-10 lg:ml-0"
>
<p class="text-lg text-gray-600">
Wahhh pelayanan here so fast gais,
and packaging dikemas dengan rapi!
</p>
<cite
class="block mt-4 not-italic font-semibold text-gray-900"
>
Aji Gaul, South Jekardah
</cite>
</div>
</blockquote>
</div>
</div>
</section>
</div>
</main>
<footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="border-t border-gray-200 pt-7">
<div
class="lg:grid lg:grid-cols-2 lg:gap-x-6 xl:gap-x-8"
>
<div
class="flex items-center p-6 bg-gray-100 rounded-lg sm:p-10"
>
<div class="max-w-sm mx-auto">
<h3 class="font-semibold text-gray-900">
Jadi pelanggan setia kami
</h3>
<p class="mt-2 text-sm text-gray-500">
Dapatkan berita tentang produk dan info
menarik dari kami tiap minggunya.
</p>
<form class="mt-4 sm:mt-6 sm:flex">
<label
for="email-address"
class="sr-only"
>Alamat Email</label
>
<input
id="email-address"
type="text"
autocomplete="email"
required
class="w-full min-w-0 px-4 py-2 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500"
/>
<div
class="mt-3 sm:flex-shrink-0 sm:mt-0 sm:ml-4"
>
<button
type="submit"
class="flex items-center justify-center w-full px-4 py-2 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-red-500"
>
Daftar
</button>
</div>
</form>
</div>
</div>
<div
class="relative flex items-center px-6 py-12 mt-6 sm:py-16 sm:px-10 lg:mt-0"
>
<div
class="absolute inset-0 overflow-hidden rounded-lg"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/footer-02-exclusive-sale.jpg>"
alt=""
class="object-cover object-center w-full h-full filter saturate-0"
/>
<div
class="absolute inset-0 bg-red-600 bg-opacity-90"
></div>
</div>
<div
class="relative max-w-sm mx-auto text-center"
>
<h3
class="text-2xl font-extrabold tracking-tight text-white"
>
Dapatkan Voucher Belanja
</h3>
<p class="mt-2 text-gray-200">
Daftar untuk mendapatkan produk terbaru
dari toko kami.
<a
href="#"
class="font-bold text-white whitespace-nowrap hover:text-gray-200"
>Lihat Selengkapnya<span
aria-hidden="true"
>
→</span
></a
>
</p>
</div>
</div>
</div>
</div>
<div
class="py-10 md:flex md:items-center md:justify-between"
>
<div class="text-center md:text-left">
<p class="text-sm text-gray-500">
© 2021 All Rights Reserved - MPPL E05
</p>
</div>
<div
class="flex items-center justify-center mt-4 md:mt-0"
>
<div class="flex space-x-8">
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Accessibility
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Privacy
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Terms
</a>
</div>
<div class="pl-6 ml-6 border-l border-gray-200">
<a
href="#"
class="flex items-center text-gray-500 hover:text-gray-600"
>
<span class="ml-3 text-sm">
Indonesia
</span>
<span class="sr-only"
>location and currency</span
>
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
product.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="<https://cdn.tailwindcss.com>"></script>
<title>Drakuli</title>
</head>
<body>
<div class="bg-white">
<header class="relative z-10">
<nav aria-label="Top">
<!-- Top navigation -->
<div class="bg-gray-900">
<div
class="flex items-center justify-between h-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
>
<!-- Currency selector -->
<form class="hidden lg:block lg:flex-1">
<div class="flex">
<label
for="desktop-currency"
class="sr-only"
>Currency</label
>
<div
class="relative -ml-2 bg-gray-900 border-transparent rounded-md group focus-within:ring-2 focus-within:ring-white"
>
<select
id="desktop-currency"
name="currency"
class="bg-none bg-gray-900 border-transparent rounded-md py-0.5 pl-2 pr-5 flex items-center text-sm font-medium text-white group-hover:text-gray-100 focus:outline-none focus:ring-0 focus:border-transparent"
>
<option>IDR</option>
</select>
<div
class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
>
<svg
aria-hidden="true"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 20 20"
class="w-5 h-5 text-gray-300"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M6 8l4 4 4-4"
/>
</svg>
</div>
</div>
</div>
</form>
<p
class="flex-1 text-sm font-medium text-center text-white lg:flex-none"
>
Dapatkan Voucher Gratis Ongkir Sampai 100%
</p>
<div
class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6"
>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Buat Akun</a
>
<span
class="w-px h-6 bg-gray-600"
aria-hidden="true"
></span>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Masuk Akun</a
>
</div>
</div>
</div>
<!-- Secondary navigation -->
<div class="bg-white">
<div class="border-b border-gray-200">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div
class="flex items-center justify-between h-16"
>
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:items-center">
<a href="#">
<span class="sr-only"
>Workflow</span
>
<img
class="w-auto h-8"
src="<https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600>"
alt=""
/>
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Mega menus -->
<div class="ml-8">
<div
class="flex justify-center h-full space-x-8"
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Beranda</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Katalog</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Tentang Kami</a
>
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div
class="flex items-center flex-1 lg:hidden"
>
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button
type="button"
class="p-2 -ml-2 text-gray-400 bg-white rounded-md"
>
<span class="sr-only"
>Open menu</span
>
<!-- Heroicon name: outline/menu -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<span class="sr-only">Workflow</span>
<img
src="<https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600>"
alt=""
class="w-auto h-8"
/>
</a>
<div
class="flex items-center justify-end flex-1"
>
<div class="flex items-center lg:ml-8">
<div class="flex space-x-8">
<div class="flex">
<a
href="#"
class="p-2 -m-2 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Account</span
>
<!-- Heroicon name: outline/user -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
</div>
</div>
<span
class="w-px h-6 mx-4 bg-gray-200 lg:mx-6"
aria-hidden="true"
></span>
<div class="flow-root">
<a
href="#"
class="flex items-center p-2 -m-2 group"
>
<!-- Heroicon name: outline/shopping-cart -->
<svg
class="flex-shrink-0 w-6 h-6 text-gray-400 group-hover:text-gray-500"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<span
class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800"
>0</span
>
<span class="sr-only"
>items in cart, view
bag</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Nav -->
<!-- Isi Content Disini -->
<div>
<main class="max-w-2xl px-4 mx-auto lg:max-w-7xl lg:px-8">
<div class="pt-24 pb-10 border-b border-gray-200">
<h1
class="text-4xl font-extrabold tracking-tight text-gray-900"
>
Produk Kami
</h1>
<p class="mt-4 text-base text-gray-500">
Produk terbaik yang kami hadirkan untuk para gamers
di Indonesia.
</p>
</div>
<div
class="pt-12 pb-24 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4"
>
<aside>
<h2 class="sr-only">Filters</h2>
<!-- Mobile filter dialog toggle, controls the 'mobileFilterDialogOpen' state. -->
<button
type="button"
class="inline-flex items-center lg:hidden"
>
<span class="text-sm font-medium text-gray-700"
>Filters</span
>
<!-- Heroicon name: solid/plus-sm -->
<svg
class="flex-shrink-0 w-5 h-5 ml-1 text-gray-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
clip-rule="evenodd"
/>
</svg>
</button>
<div class="hidden lg:block">
<form
class="space-y-10 divide-y divide-gray-200"
>
<div>
<fieldset>
<legend
class="block text-sm font-medium text-gray-900"
>
Harga
</legend>
<div class="pt-6 space-y-3">
<div class="flex items-center">
<input
id="color-0"
name="color[]"
value="white"
type="checkbox"
class="w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
/>
<label
for="color-0"
class="ml-3 text-sm text-gray-600"
>
Normal
</label>
</div>
<div class="flex items-center">
<input
id="color-1"
name="color[]"
value="beige"
type="checkbox"
class="w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
/>
<label
for="color-1"
class="ml-3 text-sm text-gray-600"
>
Diskon
</label>
</div>
</div>
</fieldset>
</div>
<div class="pt-10">
<fieldset>
<legend
class="block text-sm font-medium text-gray-900"
>
Kategori
</legend>
<div class="pt-6 space-y-3">
<div class="flex items-center">
<input
id="category-0"
name="category[]"
value="new-arrivals"
type="checkbox"
class="w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
/>
<label
for="category-0"
class="ml-3 text-sm text-gray-600"
>
Aksesoris
</label>
</div>
<div class="flex items-center">
<input
id="category-1"
name="category[]"
value="tees"
type="checkbox"
class="w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
/>
<label
for="category-1"
class="ml-3 text-sm text-gray-600"
>
Permainan
</label>
</div>
<div class="flex items-center">
<input
id="category-2"
name="category[]"
value="crewnecks"
type="checkbox"
class="w-4 h-4 border-gray-300 rounded text-red-600 focus:ring-red-500"
/>
<label
for="category-2"
class="ml-3 text-sm text-gray-600"
>
Figuran
</label>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</aside>
<section
aria-labelledby="product-heading"
class="mt-6 lg:mt-0 lg:col-span-2 xl:col-span-3"
>
<h2 id="product-heading" class="sr-only">
Products
</h2>
<div
class="grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-3"
>
<div
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg group"
>
<div
class="bg-gray-200 aspect-w-3 aspect-h-4 group-hover:opacity-75 sm:aspect-none sm:h-96"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-01.jpg>"
alt="Eight shirts arranged on table in black, olive, grey, blue, white, red, mustard, and green."
class="object-cover object-center w-full h-full sm:w-full sm:h-full"
/>
</div>
<div
class="flex flex-col flex-1 p-4 space-y-2"
>
<h3
class="text-sm font-medium text-gray-900"
>
<a href="#">
<span
aria-hidden="true"
class="absolute inset-0"
></span>
Basic Tee 8-Pack
</a>
</h3>
<p class="text-sm text-gray-500">
Get the full lineup of our Basic
Tees. Have a fresh shirt all week,
and an extra for laundry day.
</p>
<div
class="flex flex-col justify-end flex-1"
>
<p
class="text-sm italic text-gray-500"
>
Tersisa 8 barang
</p>
<p
class="text-base font-medium text-gray-900"
>
Rp 1,000,000
</p>
</div>
</div>
</div>
<div
class="relative flex flex-col overflow-hidden bg-white border border-gray-200 rounded-lg group"
>
<div
class="bg-gray-200 aspect-w-3 aspect-h-4 group-hover:opacity-75 sm:aspect-none sm:h-96"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-02.jpg>"
alt="Front of plain black t-shirt."
class="object-cover object-center w-full h-full sm:w-full sm:h-full"
/>
</div>
<div
class="flex flex-col flex-1 p-4 space-y-2"
>
<h3
class="text-sm font-medium text-gray-900"
>
<a href="#">
<span
aria-hidden="true"
class="absolute inset-0"
></span>
Basic Tee
</a>
</h3>
<p class="text-sm text-gray-500">
Look like a visionary CEO and wear
the same black t-shirt every day.
</p>
<div
class="flex flex-col justify-end flex-1"
>
<p
class="text-sm italic text-red-500"
>
Barang tidak tersedia
</p>
<p
class="text-base font-medium text-gray-900"
>
$32
</p>
</div>
</div>
</div>
<!-- More products... -->
</div>
</section>
</div>
</main>
</div>
<!-- Footer -->
<footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="border-t border-gray-200 pt-7">
<div
class="lg:grid lg:grid-cols-2 lg:gap-x-6 xl:gap-x-8"
>
<div
class="flex items-center p-6 bg-gray-100 rounded-lg sm:p-10"
>
<div class="max-w-sm mx-auto">
<h3 class="font-semibold text-gray-900">
Jadi pelanggan setia kami
</h3>
<p class="mt-2 text-sm text-gray-500">
Dapatkan berita tentang produk dan info
menarik dari kami tiap minggunya.
</p>
<form class="mt-4 sm:mt-6 sm:flex">
<label
for="email-address"
class="sr-only"
>Alamat Email</label
>
<input
id="email-address"
type="text"
autocomplete="email"
required
class="w-full min-w-0 px-4 py-2 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500"
/>
<div
class="mt-3 sm:flex-shrink-0 sm:mt-0 sm:ml-4"
>
<button
type="submit"
class="flex items-center justify-center w-full px-4 py-2 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-red-500"
>
Daftar
</button>
</div>
</form>
</div>
</div>
<div
class="relative flex items-center px-6 py-12 mt-6 sm:py-16 sm:px-10 lg:mt-0"
>
<div
class="absolute inset-0 overflow-hidden rounded-lg"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/footer-02-exclusive-sale.jpg>"
alt=""
class="object-cover object-center w-full h-full filter saturate-0"
/>
<div
class="absolute inset-0 bg-red-600 bg-opacity-90"
></div>
</div>
<div
class="relative max-w-sm mx-auto text-center"
>
<h3
class="text-2xl font-extrabold tracking-tight text-white"
>
Dapatkan Voucher Belanja
</h3>
<p class="mt-2 text-gray-200">
Daftar untuk mendapatkan produk terbaru
dari toko kami.
<a
href="#"
class="font-bold text-white whitespace-nowrap hover:text-gray-200"
>Lihat Selengkapnya<span
aria-hidden="true"
>
→</span
></a
>
</p>
</div>
</div>
</div>
</div>
<div
class="py-10 md:flex md:items-center md:justify-between"
>
<div class="text-center md:text-left">
<p class="text-sm text-gray-500">
© 2021 All Rights Reserved - MPPL E05
</p>
</div>
<div
class="flex items-center justify-center mt-4 md:mt-0"
>
<div class="flex space-x-8">
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Accessibility
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Privacy
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Terms
</a>
</div>
<div class="pl-6 ml-6 border-l border-gray-200">
<a
href="#"
class="flex items-center text-gray-500 hover:text-gray-600"
>
<span class="ml-3 text-sm">
Indonesia
</span>
<span class="sr-only"
>location and currency</span
>
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
product-detail.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="<https://cdn.tailwindcss.com>"></script>
<title>Drakuli</title>
</head>
<body>
<div class="bg-white">
<header class="relative z-10">
<nav aria-label="Top">
<!-- Top navigation -->
<div class="bg-gray-900">
<div
class="flex items-center justify-between h-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"
>
<!-- Currency selector -->
<form class="hidden lg:block lg:flex-1">
<div class="flex">
<label
for="desktop-currency"
class="sr-only"
>Currency</label
>
<div
class="relative -ml-2 bg-gray-900 border-transparent rounded-md group focus-within:ring-2 focus-within:ring-white"
>
<select
id="desktop-currency"
name="currency"
class="bg-none bg-gray-900 border-transparent rounded-md py-0.5 pl-2 pr-5 flex items-center text-sm font-medium text-white group-hover:text-gray-100 focus:outline-none focus:ring-0 focus:border-transparent"
>
<option>IDR</option>
</select>
<div
class="absolute inset-y-0 right-0 flex items-center pointer-events-none"
>
<svg
aria-hidden="true"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 20 20"
class="w-5 h-5 text-gray-300"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M6 8l4 4 4-4"
/>
</svg>
</div>
</div>
</div>
</form>
<p
class="flex-1 text-sm font-medium text-center text-white lg:flex-none"
>
Dapatkan Voucher Gratis Ongkir Sampai 100%
</p>
<div
class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6"
>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Buat Akun</a
>
<span
class="w-px h-6 bg-gray-600"
aria-hidden="true"
></span>
<a
href="#"
class="text-sm font-medium text-white hover:text-gray-100"
>Masuk Akun</a
>
</div>
</div>
</div>
<!-- Secondary navigation -->
<div class="bg-white">
<div class="border-b border-gray-200">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div
class="flex items-center justify-between h-16"
>
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:items-center">
<a href="#">
<span class="sr-only"
>Workflow</span
>
<img
class="w-auto h-8"
src="<https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600>"
alt=""
/>
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Mega menus -->
<div class="ml-8">
<div
class="flex justify-center h-full space-x-8"
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Beranda</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Katalog</a
>
<a
href="#"
class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-800"
>Tentang Kami</a
>
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div
class="flex items-center flex-1 lg:hidden"
>
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button
type="button"
class="p-2 -ml-2 text-gray-400 bg-white rounded-md"
>
<span class="sr-only"
>Open menu</span
>
<!-- Heroicon name: outline/menu -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<span class="sr-only">Workflow</span>
<img
src="<https://tailwindui.com/img/logos/workflow-mark.svg?color=indigo&shade=600>"
alt=""
class="w-auto h-8"
/>
</a>
<div
class="flex items-center justify-end flex-1"
>
<div class="flex items-center lg:ml-8">
<div class="flex space-x-8">
<div class="flex">
<a
href="#"
class="p-2 -m-2 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Account</span
>
<!-- Heroicon name: outline/user -->
<svg
class="w-6 h-6"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</a>
</div>
</div>
<span
class="w-px h-6 mx-4 bg-gray-200 lg:mx-6"
aria-hidden="true"
></span>
<div class="flow-root">
<a
href="#"
class="flex items-center p-2 -m-2 group"
>
<!-- Heroicon name: outline/shopping-cart -->
<svg
class="flex-shrink-0 w-6 h-6 text-gray-400 group-hover:text-gray-500"
xmlns="<http://www.w3.org/2000/svg>"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
/>
</svg>
<span
class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800"
>0</span
>
<span class="sr-only"
>items in cart, view
bag</span
>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<!-- Nav -->
<!-- Isi Content Disini -->
<div class="bg-white">
<main
class="px-4 pb-24 mx-auto pt-14 sm:pt-16 sm:pb-32 sm:px-6 lg:max-w-7xl lg:px-8"
>
<!-- Product -->
<div
class="lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16"
>
<!-- Product image -->
<div class="lg:row-end-1 lg:col-span-4">
<div
class="overflow-hidden bg-gray-100 rounded-lg aspect-w-4 aspect-h-3"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg>"
alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles."
class="object-cover object-center"
/>
</div>
</div>
<!-- Product details -->
<div
class="max-w-2xl mx-auto mt-14 sm:mt-16 lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3"
>
<div class="flex flex-col-reverse">
<div class="mt-4">
<h1
class="text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl"
>
Application UI Icon Pack
</h1>
<h2
id="information-heading"
class="sr-only"
>
Product information
</h2>
<p class="mt-2 text-sm text-gray-500">
Tersisa 5 barang
</p>
</div>
<div>
<h3 class="sr-only">Reviews</h3>
<div class="flex items-center">
<!--
Heroicon name: solid/star
Active: "text-yellow-400", Default: "text-gray-300"
-->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-gray-300"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="sr-only">4 out of 5 stars</p>
</div>
</div>
<p class="mt-6 text-gray-500">
The Application UI Icon Pack comes with over 200
icons in 3 styles: outline, filled, and branded.
This playful icon pack is tailored for complex
application user interfaces with a friendly and
legible look.
</p>
<div
class="grid grid-cols-1 mt-10 gap-x-6 gap-y-4 sm:grid-cols-2"
>
<button
type="button"
class="flex items-center justify-center w-full px-8 py-3 text-base font-medium text-white border border-transparent rounded-md bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-red-500"
>
Beli Sekarang
</button>
<button
type="button"
class="flex items-center justify-center w-full px-8 py-3 text-base font-medium border border-transparent rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-red-500"
>
Masukan Keranjang
</button>
</div>
<div class="pt-10 mt-10 border-t border-gray-200">
<h3 class="text-sm font-medium text-gray-900">
Share
</h3>
<ul
role="list"
class="flex items-center mt-4 space-x-6"
>
<li>
<a
href="#"
class="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Share on Facebook</span
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
<li>
<a
href="#"
class="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Share on Instagram</span
>
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd"
/>
</svg>
</a>
</li>
<li>
<a
href="#"
class="flex items-center justify-center w-6 h-6 text-gray-400 hover:text-gray-500"
>
<span class="sr-only"
>Share on Twitter</span
>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
/>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div
class="w-full max-w-2xl mx-auto mt-16 lg:max-w-none lg:mt-0 lg:col-span-4"
>
<div>
<div class="border-b border-gray-200">
<div
class="flex -mb-px space-x-8"
aria-orientation="horizontal"
role="tablist"
>
<button
id="tab-reviews"
class="py-6 text-sm font-bold text-gray-700 border-b-2 border-transparent hover:text-gray-800 whitespace-nowrap"
aria-controls="tab-panel-reviews"
role="tab"
type="button"
>
Customer Reviews
</button>
</div>
</div>
<!-- 'Customer Reviews' panel, show/hide based on tab state -->
<div
id="tab-panel-reviews"
class="-mb-10"
aria-labelledby="tab-reviews"
role="tabpanel"
tabindex="0"
>
<h3 class="sr-only">Customer Reviews</h3>
<div
class="flex space-x-4 text-sm text-gray-500"
>
<div class="flex-none py-10">
<img
src="<https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80>"
alt=""
class="w-10 h-10 bg-gray-100 rounded-full"
/>
</div>
<div class="flex-1 py-10">
<h3
class="font-medium text-gray-900"
>
Emily Selman
</h3>
<p>
<time datetime="2021-07-16"
>July 16, 2021</time
>
</p>
<div class="flex items-center mt-4">
<!--
Heroicon name: solid/star
Active: "text-yellow-400", Default: "text-gray-300"
-->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="sr-only">
5 out of 5 stars
</p>
<div
class="mt-4 prose-sm prose text-gray-500 max-w-none"
>
<p>
This icon pack is just what
I need for my latest
project. There's an icon for
just about anything I could
ever need. Love the playful
look!
</p>
</div>
</div>
</div>
<div
class="flex space-x-4 text-sm text-gray-500"
>
<div class="flex-none py-10">
<img
src="<https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80>"
alt=""
class="w-10 h-10 bg-gray-100 rounded-full"
/>
</div>
<div
class="flex-1 py-10 border-t border-gray-200"
>
<h3
class="font-medium text-gray-900"
>
Hector Gibbons
</h3>
<p>
<time datetime="2021-07-12"
>July 12, 2021</time
>
</p>
<div class="flex items-center mt-4">
<!--
Heroicon name: solid/star
Active: "text-yellow-400", Default: "text-gray-300"
-->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
<!-- Heroicon name: solid/star -->
<svg
class="flex-shrink-0 w-5 h-5 text-yellow-400"
xmlns="<http://www.w3.org/2000/svg>"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
/>
</svg>
</div>
<p class="sr-only">
5 out of 5 stars
</p>
<div
class="mt-4 prose-sm prose text-gray-500 max-w-none"
>
<p>
Blown away by how polished
this icon pack is.
Everything looks so
consistent and each SVG is
optimized out of the box so
I can use it directly with
confidence. It would take me
several hours to create a
single icon this good, so
it's a steal at this price.
</p>
</div>
</div>
</div>
<!-- More reviews... -->
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Footer -->
<footer aria-labelledby="footer-heading" class="bg-white">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="border-t border-gray-200 pt-7">
<div
class="lg:grid lg:grid-cols-2 lg:gap-x-6 xl:gap-x-8"
>
<div
class="flex items-center p-6 bg-gray-100 rounded-lg sm:p-10"
>
<div class="max-w-sm mx-auto">
<h3 class="font-semibold text-gray-900">
Jadi pelanggan setia kami
</h3>
<p class="mt-2 text-sm text-gray-500">
Dapatkan berita tentang produk dan info
menarik dari kami tiap minggunya.
</p>
<form class="mt-4 sm:mt-6 sm:flex">
<label
for="email-address"
class="sr-only"
>Alamat Email</label
>
<input
id="email-address"
type="text"
autocomplete="email"
required
class="w-full min-w-0 px-4 py-2 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:border-red-500 focus:ring-1 focus:ring-red-500"
/>
<div
class="mt-3 sm:flex-shrink-0 sm:mt-0 sm:ml-4"
>
<button
type="submit"
class="flex items-center justify-center w-full px-4 py-2 text-base font-medium text-white border border-transparent rounded-md shadow-sm bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-red-500"
>
Daftar
</button>
</div>
</form>
</div>
</div>
<div
class="relative flex items-center px-6 py-12 mt-6 sm:py-16 sm:px-10 lg:mt-0"
>
<div
class="absolute inset-0 overflow-hidden rounded-lg"
>
<img
src="<https://tailwindui.com/img/ecommerce-images/footer-02-exclusive-sale.jpg>"
alt=""
class="object-cover object-center w-full h-full filter saturate-0"
/>
<div
class="absolute inset-0 bg-red-600 bg-opacity-90"
></div>
</div>
<div
class="relative max-w-sm mx-auto text-center"
>
<h3
class="text-2xl font-extrabold tracking-tight text-white"
>
Dapatkan Voucher Belanja
</h3>
<p class="mt-2 text-gray-200">
Daftar untuk mendapatkan produk terbaru
dari toko kami.
<a
href="#"
class="font-bold text-white whitespace-nowrap hover:text-gray-200"
>Lihat Selengkapnya<span
aria-hidden="true"
>
→</span
></a
>
</p>
</div>
</div>
</div>
</div>
<div
class="py-10 md:flex md:items-center md:justify-between"
>
<div class="text-center md:text-left">
<p class="text-sm text-gray-500">
© 2021 All Rights Reserved - MPPL E05
</p>
</div>
<div
class="flex items-center justify-center mt-4 md:mt-0"
>
<div class="flex space-x-8">
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Accessibility
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Privacy
</a>
<a
href="#"
class="text-sm text-gray-500 hover:text-gray-600"
>
Terms
</a>
</div>
<div class="pl-6 ml-6 border-l border-gray-200">
<a
href="#"
class="flex items-center text-gray-500 hover:text-gray-600"
>
<span class="ml-3 text-sm">
Indonesia
</span>
<span class="sr-only"
>location and currency</span
>
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>