JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

CSS playground.

<link href="https://fonts.googleapis.com/css?family=Galdeano&display=swap" rel="stylesheet">

<p>
<div style='display:flex;justify-content:space-between;'>

  <div class="multi-border nearlyhalf">
  
  <div class='title'>Title div...</div>
    Contrary to popular bssical Latin literature from 45 BC, ng it over 2000 years old. R McClintock, a Latin professor um of the word in classical <br>literature, discovered the undoubtable source. Lorehhhhm Ipsum comes from sections 1.10hhhhhhh hhhh hhhhhhh hhhhhhhh hhhhhhh<br>hhhhhh hhhhh hhh.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil)gg</div>
  
  <div class="multi-border nearlyhalf">
 
  <h2>No title div...</h2>
    Contrary to popular bssical Latin literature from 45 BC, ng it over 2000 years old. R McClintock, a Latin professor um of the word in classical <br>literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil)gg
  </div>
  
 </div> 
 <br>Now some different titles.<br>
 <div style='display:flex;justify-content:space-between;'>

  <div class="multi-border nearlyhalf">
  
  <div class='title title_griff'>Griffin style</div>
    Contrary to popular bssical Latin literature from 45 BC, ng it over 2000 years old. R McClintock, a Latin professor um of the word in classical <br>literature, discovered the undoubtable source. Lore</div>
  
  <div class="multi-border nearlyhalf">
 
  <div class='title title_dragon'>Dragon style</div>
    Contrary to popular bssical Latin literature from 45 BC, ng it over 2000 years old. R McClintock, a Latin professor um of the word in classical <br>literature, discovered the undoubtable source. Lore
  </div>
  
 </div>
 
  <div style='display:flex;justify-content:space-between;'>

  <div class="multi-border nearlythird">
  <div class='title title_griff'>Griffin style</div>
    Contrary to popular bssical Latin literature from 45...

CSS

div {box-sizing:border-box;}
body {font-family: 'Galdeano', sans-serif;
background-image:url(http://griffusion.elementfx.com/pics/ui/bg-day.jpg);background-attachment:fixed;}

h2 {margin:5px 0px;}

/* separate sections with some space between them, to accommodate borders */
.nearlyhalf {width:calc(50% - 50px);}
.nearlythird {width:calc(33% - 50px);}

/* gradient banner, stretches across the psuedo-elements.
Some styles have faint images overlaid too */
.title {position:relative;left:-30px;
  width:calc(100% + 60px);
  padding:10px 30px 10px 30px;
  margin-bottom:10px;
  font-size:24px;font-weight:bold;
  background: linear-gradient( 109.6deg, rgba(245,239,249,1) 30.1%, rgba(207,211,236,1) 100.2% );
}

.title_griff {
  background: url("http://griffusion.elementfx.com/microstable/sprites/1/fan.gif") 90% no-repeat,
  linear-gradient( 109.6deg, rgba(245,239,249,1) 30.1%, rgba(207,211,236,1) 100.2% );
}
.title_dragon {
  background: url("http://griffusion.elementfx.com/microstable/sprites/15/fan.gif") 90% no-repeat,
  linear-gradient( 109.6deg, rgba(245,239,249,1) 30.1%, rgba(207,211,236,1) 100.2% );
}

.multi-border{
  margin:40px auto; color:#695ea8;
  min-height: 100px;
  background-color: white;
  border:0px solid #f29053;
  position: relative;
padding:16px;
  border-radius:5px;
  
}
.multi-border::before{
  content:'';
  position:absolute;
  top:-6px; bottom:-6px; right:-6px; left:-6px;
  z-index:-2;
  border-radius:10px;
  background-image: linear-gradient( 109.6deg,  rgba(245,239,249,1) 30.1%, rgba(207,211,236,1) 100.2% );
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.0);
}

.multi-border::after{   
  content:'';
  position:absolute;
  top:-14px; bottom:-14px; right:-14px; left:-14px;
  z-index: -3;
  border-radius:10px;
  background-color:white;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

/* boxes that hold a mythic's thumbnail sprite and some info */
.mythic_card{
  min-width:240px;max-width:260px;
  margin:20px auto;...