JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:type" content="article" />

  
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="og:title" property="og:title" content="" />
  <meta name="og:description" property="og:description" content="" />
  <meta name="og:image" property="og:image" content="" />
  <meta name="twitter:title" content="" />
  <meta name="twitter:description" content="" />
  <meta name="twitter:image" content="" />
  <meta name="twitter:card" content="summary_large_image" />
    <!-- Tailwind CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Pazly Colors -->
    <link rel="stylesheet" href="https://pazly.dev/colors/gradients.css" />
    <link rel="stylesheet" href="https://pazly.dev/colors/backgrounds.css" />
    <link rel="stylesheet" href="https://pazly.dev/colors/text.css" />
    <link rel="stylesheet" href="https://pazly.dev/colors/border.css" />
    <style>
    body { overflow-x: hidden; }
    h1, h2, h3, h4, h5, h6 { line-height:1.3 !important; }
    .stretchToScreen { width:100vw; height:100vh; }
    </style>

    <!-- Fontswesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
</head>

<body class="m-0 p-0 stretchToScreen">


<!-- Pazly Blocks Come Here -->
<section id="pazly-template-set" class="m-0 p-0 stretchToScreen bg-white">
<section xmlns="http://www.w3.org/1999/xhtml"  class="w-full bg-p-white">
    <div  class="container mx-auto flex py-16 px-5 md:flex-row flex-col-reverse items-center">
        <div  class="w-full md:w-8/12 lg:w-6/12...