JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Public School | Home</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 font-sans">
  <header class="bg-white shadow py-6 px-4">
    <div class="container mx-auto flex items-center justify-between">
      <a href="#" class="text-2xl font-bold text-gray-800 no-underline">Public School</a>
      <nav class="flex items-center">
        <a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Home</a>
        <a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">About</a>
        <a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Programs</a>
        <a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">News</a>
        <a href="#" class="px-3 py-2 rounded-md font-semibold text-gray-700 hover:text-gray-800">Contact</a>
      </nav>
    </div>
  </header>
  <main class="py-8">
    <div class="container mx-auto flex flex-wrap justify-center">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white rounded-lg shadow-lg p-6">
          <img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3132&q=80" alt="School" class="w-full rounded-lg shadow-lg">
          <h2 class="font-semibold text-2xl mt-4">Welcome to Public School</h2>
          <p class="text-gray-700 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ligula diam, tempus at nisi ac, lobortis gravida lectus.</p>
          <div class="mt-4">
            <a href="#" class="px-3 py-2 rounded-full bg-blue-500 font-semibold text-white hover:bg-blue-600">Learn More</a>
          </div>
        </div>
      </div>
  <div...