JSFiddle - React, Tailwind, and code Playground

by gcarames

HTML

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--<link rel="stylesheet" href="/inline.css">-->

  <head>
    <style>
      .cinturon-heding-top-chain>.chain-content {
        overflow: hidden;
        background-color: transparent !important;
      }

      .cinturon-heding-top-chain>.chain-content>.wrapper {
        padding: 0 !important
      }

      .cinturon-heding-top-chain .chain-content .flex-stack {
        height: initial !important;
      }

      .cinturon-heding-top .brand-wrapper-2 {
        background: #e2e2e2;
        /*            background: url(https://s3.amazonaws.com/arc-wordpress-client-uploads/infobae-wp/wp-content/uploads/2018/10/12165511/50-Beautiful-and-Minimalist-Presentation-Backgrounds-04.jpg);*/
        background-size: contain;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16px 21px 64px;
        margin: -16px -16px -48px;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col.left {
        justify-content: flex-start;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col.right {
        justify-content: flex-end;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col img.img-flex {
        display: block;
        max-width: 100%;
        height: auto;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col.left .img-flex.left {
        max-height: 32px;
      }

      .cinturon-heding-top .brand-wrapper-2 .brand-col.right .img-flex.right {
        max-height: 16px;
      }

    </style>
  </head>
  <div class="cinturon-heding-top">
    <div class="brand-wrapper-2">
      <div class="brand-col left"> <img...