JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">

  <!-- FIIN -->
  <div class="row row_flex">

    <div class="col-sm-12 col-md-6 col-lg-6 flx mast_wrap">
      <div class="panel_wrap nill flx">
      <div class="row nill">
      <div class="col-sm-12 col-md-12 col-lg-6">
        <a title="Yosh - GVM" class="fancybox zero" rel="gallery1" href="http://galnova.com/A20/profile/GVM-yosh.png">
        <img class="nill" alt="Yosh - GVM" src="http://galnova.com/A20/profile/GVM-yosh.png">
        </a>
       </div>
            
       <div class="col-sm-12 col-md-12 col-lg-6 small_nill">
         <div class="hd">Yosh Baskerville</div>
              <p class="">"Robe Knight and Guardian"</p>
              <ul class="flex_el">
              <li>House: Robe</li>
              <li>Job: Robe Knight</li>
              <li>Style: Slicer</li>
              <li>Weapon: Sword(Rhetoric)</li>
              <li>Special: The Answer</li>
              <li>Personality: Causious</li>  
              </ul>
          </div>
        </div>
            <div class="bttn_wrapper">
              <a><button type="button" class="col-sm-12 col-lg-6 float-left btn btn-primary btn-lg"><span class="fa fa-info-circle"></span> More Info</button></a>
               <a><button type="button" class="col-sm-12 col-lg-6 float-right btn btn-outline-secondary btn-lg"><span class="fa fa-bomb"></span> Specials</button></a>
           ...

CSS

.container {
  margin-bottom: 40px;
  }
  
.row {
  background: #f8f9fa;
  margin-top: 20px;
  border: solid 1px #dddddd;
  padding: 10px;
}

.fancybox {
    background: rgb(202,202,224);
background: linear-gradient(0deg, rgba(202,202,224,1) 0%, rgba(192,214,215,1) 35%, rgba(185,236,255,1) 100%);

    float: left;
}

.row.sub {
  background: #dff0f1;
  margin-bottom: 10px;
  border: solid 1px #dddddd;
  padding: 0;
}

.row.nill {
  background: none;
  margin: 0;
  border: none;
  padding: 0;
}

.row_flex {
    display: flex;
}

.row.sub [class*="col-"] {
  margin: 0;
}

.flx {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.flex_el {
    flex: 1 1 auto;
}

ul {
  padding-left: 20px;
  margin-bottom: 0px;
}

[class*="col-"] {
  padding: 10px;
  font-size: 14px;
}

.mast_wrap:nth-child(odd) [class*="col-"] img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

[class*="col-"] .panel_wrap {
  overflow: hidden;
  border: solid 1px #6c757d;
  padding: 10px;
  padding-top: 0;
  padding-left: 0;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

[class*="col-"] .panel_wrap:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
  
[class*="col-"] .panel_wrap.nill 
  padding: 0 10px 0 0;
}

[class*="col-"] .panel_wrap.nill a.lit {
  margin: 0 0 10px 10px;
}

[class*="col-"] .panel_wrap img {
    width: 100%;
    padding-top: 10px;
    margin-bottom: 10px;
    border: solid 1px #6c757d;
}

[class*="col-"] .panel_wrap img.nill {
    padding-top: 0;
    margin-bottom: 0;
}

[class*="col-"] .panel_wrap .hd {
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background: #eeefff;
  margin-top: 0px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
}

[class*="col-"] .panel_wrap p {
  padding: 10px 0 0 0;
  font-weight: bold;
  margin-bottom: 5px;
}

[class*="col-"] .panel_wrap p.alter {
  padding: 0;
}

.bttn_wrapper {
  margin-left: 10px;
}

.btn {
  border-radius: 0;
}
/*...