JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<section class="py-lg-10 py-7 text-white position-relative">
  <div class="container-xl px-5 d-flex flex-column flex-lg-row flex-items-center">
    <div class="flex-item-equal pr-0 pr-lg-4 text-center text-lg-left">

      {{- if .Site.Data.announcement.enabled }}
      <div class="announcement d-flex flex-row mb-3 alt-h5 flex-justify-center flex-lg-justify-start">
        <a href="{{ .Site.Data.announcement.link }}">
          <span class="label">{{ .Site.Data.announcement.label }}</span>
          <span class="text">{{ .Site.Data.announcement.title }}</span>
          <span class="arrow">&raquo;</span>
        </a>
      </div>
      {{- end}}

      <h1 class="f00-light lh-condensed text-heavy heading">
        Find and fix issues during code reviews.
      </h1>
      <p class="alt-lead mt-3 mb-5 f3 text-gray-v-light pr-0 pr-lg-4">
        Discover and fix bug risks, anti-patterns, performance issues, and security flaws — before they land in production. Up and running in a couple of minutes. For Python and Go.
      </p>
      <div class="d-flex flex-lg-row flex-items-center flex-column">
        <a href="/signup/" id="hero-signup-button" class="d-inline-block btn-glow">GET STARTED</a>
      </div>
      <p class="text-gray-v-light f4 mt-4">Works with GitHub and GitLab <span class="mx-1">&middot;</span> Free to use for open-source</p>
    </div>

    <div class="flex-item-equal width-full mt-4 mt-lg-0 d-flex">
      <div id="bm" style="min-height:400px"></div>
      <script>
        var animation = bodymovin.loadAnimation({
          container: document.getElementById('bm'),
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: '{{ .Site.Params.cdnURL }}/images/workflow/data.json'
        })
      </script>
    </div>
  </div>
  <div class="container-xl">
    {{ partial "customers.html" (dict "data" .Site.Data.customers.customers "dark" true "cdnURL" .Site.Params.cdnURL) }}
  </div>
</section>