JSFiddle - React, Tailwind, and code Playground

HTML

<div class="RelativePageWrapper">
  <div class="FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper">
  
    <header class="RegularHeaderWithMenu">
      <div class="RegularHeaderWithMenu-Centerer">
        <a class="RegularHeaderWithMenu-LogoWrapper" href="#"></a>
      </div>
    </header>
  
  
  <div class="FlexPageLayoutWithFixedHeaderAndBottomFooter-MainAndFooterFlexScroolView">
    <section class="Block-Workflow-RootWrapper">
      <div class="Block-Workflow-Centerer">
        <h2 class="Block-Workflow-Heading" id="workflow">Brick quiz whangs</h2>
        <div class="Block-Workflow-ListView">
          <div class="Block-Workflow-ListItem">
            <div>
              <div class="circle yellow"></div>
              <div class="vline"></div>
            </div>
            <div>
              <div class="hline"></div>
            </div>
            <div>
              <div class="Block-Workflow-ListItem-Title">Quick wafting zephyrs vex bold Jim.</div>
              <div class="Block-Workflow-ListItem-Explanation">
                <p>An inspired calligrapher can create pages of beauty using stick ink, quill, brush, pick-axe, buzz saw, or even strawberry jam.</p>
              </div>
            </div>
          </div>
          <div class="Block-Workflow-ListItem">
            <div>
              <div class="circle white"></div>
              <div class="vline"></div>
            </div>
            <div>
              <div class="hline"></div>
            </div>
            <div>
              <div class="Block-Workflow-ListItem-Title">Sphinx of black quartz judge my vow!</div>
              <div class="Block-Workflow-ListItem-Explanation">
                <p>Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze.</p>
              </div>
            </div>
          </div>
          <div class="Block-Workflow-ListItem">
            <div>
              <div class="circle yellow"></div>
...

CSS

@charset "UTF-8";
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
  display: block; }

a {
  color: #000;
  text-decoration: none; }
  a img {
    border: none; }

ol,ul {
  list-style: none; }

blockquote,q {
  quotes: none; }
  blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button:focus,input:focus,select:focus,textarea:focus {
  outline: none; }

input {
  -webkit-box-shadow: none;
          box-shadow: none; }

input[type="button"],input[type="submit"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
       appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  input[type="button"]::-webkit-search-decoration,input[type="submit"]::-webkit-search-decoration {
    display: none; }
  input[type="button"]::focus,input[type="submit"]::focus {
    outline-offset: -2px; }

@font-face {
  font-family: YuGothicM;
  src: local(Yu Gothic Medium); }

.FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper {
  height: 100vh; }

.FlexPageLayoutWithFixedHeaderAndBottomFooter-MainAndFooterFlexScroolView,.FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
...