JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<!doctype html>
<html lang="en">

<head>
  <title>PicklePro</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
</head>

<body class="bg-gray-900 text-white">
  <!-- Hero Section -->
  <section class="relative bg-gray-900">
    <div class="container mx-auto px-6 lg:px-20 py-24">
      <div class="text-center">
        <!-- Background Image -->
        <div class="relative">
          <img
            src="https://via.placeholder.com/800x400" 
            alt="Keep Pickleball Great Hat"
            class="mx-auto rounded-xl shadow-lg object-cover w-full max-w-4xl"
          />
          <!-- Overlay Text -->
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="text-white text-center bg-black bg-opacity-60 px-6 py-8 rounded-md">
              <h1 class="text-5xl font-extrabold tracking-tight">Keep Pickleball Great</h1>
              <p class="mt-4 text-lg text-gray-300">Limited Edition Hat</p>
              <button class="mt-6 px-8 py-3 bg-red-600 text-white text-lg font-semibold rounded shadow-lg hover:bg-red-700 transition duration-300">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- About Section -->
<section class="py-16 bg-gray-900">
  <div class="container mx-auto px-6 lg:px-20 text-center">
    <h2 class="text-4xl font-extrabold mb-6">We Love Creators</h2>
    <p class="text-gray-400 text-lg max-w-2xl mx-auto mb-12">
      At PicklePro, we celebrate creativity and the passion for pickleball. Our mission is to empower creators who inspire the sport and the community with bold ideas and unmatched quality.
    </p>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div>
        <h3 class="text-3xl font-bold text-white">2012</h3>
        <p...