JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="columnContainer pad20">

  <!-- ----------------------------------------------- -->
  <div class="fContainer">
    <div class="floatTopRight"><span class="cocTriangle"><span class="toolTip">

        <?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 47.5 47.5" version="1.1" viewBox="0 0 47.5 47.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="m0 38h38v-38h-38v38z" /></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,0,47.5)"><g clip-path="url(#a)"><g transform="translate(3.6533,2)"><path d="m0 0c-1.842 0-2.654 1.338-1.806 2.973l15.609 30.055c0.848 1.635 2.238 1.635 3.087 0l15.609-30.055c0.85-1.635 0.037-2.973-1.806-2.973h-30.693z" fill="#ffcc4d" /></g><g transform="translate(16.769 26.34)"><path d="m0 0c0 1.302 0.961 2.108 2.232 2.108 1.241 0 2.233-0.837 2.233-2.108v-11.938c0-1.271-0.992-2.108-2.233-2.108-1.271 0-2.232 0.807-2.232 2.108v11.938zm-0.187-18.293c0 1.333 1.086 2.418 2.419 2.418s2.419-1.085 2.419-2.418c0-1.334-1.086-2.419-2.419-2.419s-2.419 1.085-2.419 2.419" fill="#fff" /></g></g></g></svg>
<span class="toolTipText">Registering for this course requires approval from your chain of command</span></span>
</span><a href="#{linkgoeshere}" target="_blank" class="noStyleLink"><span class="shift20 addExternal blueText h5">Register</span></a></div>
    <div class="fItem custLeftWidth pad0 alignTop">
      <div class="calendarBlock centerText">
        <span class="daysorhours">Day<span class="moreThanOne">{S}</span></span>
        <span class="daysorhours_howmany">{#}</span>
      </div>
    </div>
    <div class="fItem custRightWidth pad0 alignTop">
      <span class="h3 custRightTitleWidth">{ TITLE GOES HERE }</span>
      <div class="break10"></div>
      <span class="custRightTitleWidth lText"><svg class="faIcon greyFill" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="max-width:40px;">
     <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0...

CSS

/* ------------------------------------ fix sn */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
    padding-left: 0;
    padding-right: 0;
}


a {cursor: pointer; color: #3775D8;}
a:active {opacity: .8;}

a.lightgreyText.hoverUnderline:hover {
    text-decoration: underline !important;
    text-decoration-color: white !important;
}

.cursorPointer {
	cursor: pointer;
}
/* ----------------------------------- page spacing */
.break5 {display: block; height: 5px;}
.break10 {display: block; height: 10px; flex-basis: 100%;}
.break15 {display: block; height: 15px;...