JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Explore the world of Pickleball with our in-depth guide. Learn about top destinations, tips, and more.">
  <meta name="keywords" content="Pickleball, Travel, Destinations, Sports, Recreation">
  <meta name="author" content="Your Name">
  <title>Destination Pickleball - Your Ultimate Guide</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body class="bg-gray-100 text-gray-900">

  <header class="bg-blue-600 text-white p-4">
    <h1 class="text-3xl font-bold">Destination Pickleball - Your Ultimate Guide</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#introduction" class="hover:underline">Introduction</a></li>
        <li><a href="#example" class="hover:underline">Top Destinations</a></li>
        <li><a href="#conclusion" class="hover:underline">Conclusion</a></li>
      </ul>
    </nav>
  </header>

  <main class="p-4">
    <section id="introduction" class="my-8">
      <h2 class="text-2xl font-semibold">Introduction</h2>
      <p>Welcome to our comprehensive guide on Pickleball destinations. Whether you're a seasoned player or a beginner, this guide will help you discover the best places to play and enjoy Pickleball. From local courts to international destinations, we've got you covered.</p>
    </section>

    <section id="example" class="my-8">
      <h2 class="text-2xl font-semibold">Top Destinations</h2>
      <p>Below is a list of top Pickleball destinations. Click the button to highlight this section and make it stand out.</p>
      <button id="toggleText" class="bg-blue-600 text-white p-2 rounded">Toggle Text</button>
      <button id="highlightSection" class="bg-blue-600 text-white p-2 rounded ml-4">adfjsadk;fjl...