JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="order-items-meta-box" class="postbox ">
  <div class="postbox-header">

    <div data-plate="standard-uk-car" data-plate-option-value="front-rear">
      <div class="plate-builder-preview">
        <div class="plate plate-standard-uk-car">
          <div class="row justify-content-center">
            <div class="col-12">
              <div class="front">
                <div class="plate-chars"><svg class="char char_l" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.34 314.22">
                    <g>
                      <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
                      <path class="char-letter" d="M154.28,268.92H24.06a5.65,5.65,0,0,1-5.66-5.66V51a5.66,5.66,0,0,1,5.66-5.66H52.37A5.66,5.66,0,0,1,58,51V224.76a5.66,5.66,0,0,0,5.66,5.67h90.59a5.66,5.66,0,0,1,5.66,5.66v27.17A5.66,5.66,0,0,1,154.28,268.92Z"></path>
                    </g>
                  </svg><svg class="char char_r" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.34 314.22">
                    <g>
                      <polygon class="char-jig" points="178.34 314.22 178.34 156.96 172.68 156.96 172.68 0 5.66 0 0 0 0 156.82 5.66 156.82 5.66 314.22 178.34 314.22"></polygon>
                      <path class="char-letter" d="M151.8,268.92H121.43a5.65,5.65,0,0,1-5.31-3.71L84.87,180.07a5.66,5.66,0,0,0-5.32-3.71H63.69A5.65,5.65,0,0,0,58,182v81.24a5.65,5.65,0,0,1-5.66,5.66H24.06a5.65,5.65,0,0,1-5.66-5.66V51a5.66,5.66,0,0,1,5.66-5.66H109a51,51,0,0,1,51,51v28.87c0,25.86-11.1,42.27-29.21,49a5.64,5.64,0,0,0-3.26,7.24l29.64,79.91A5.66,5.66,0,0,1,151.8,268.92ZM120.31,103.61c0-12.74-7.36-19.82-19.82-19.82H63.69A5.66,5.66,0,0,0,58,89.45V132.2a5.65,5.65,0,0,0,5.66,5.66h36.8A19.82,19.82,0,0,0,120.31,118Z"></path>
                    </g>
                  </svg><svg class="char char_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.54 314.65">
                   ...

CSS

@charset "UTF-8";

/* front end styles
-------------------------------------------------- */

/* colors
-------------------------------------------------- */

/* colors
-------------------------------------------------- */

/* bootstrap modification
-------------------------------------------------- */

/* plate builder
-------------------------------------------------- */

#plate-builder-plate-ajax {
  min-height: 100%;
}

#plate-builder-plate-ajax.loading {
  opacity: 0.25;
}

#plate-builder-input {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  resize: none;
}

#plate-builder-plates {
  font-size: 1.2rem;
}

#plate-builder-add-ons {
  font-size: 1.2rem;
}

#plate-builder-cart {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid #373737;
}

#plate-builder-log {
  font-size: 80%;
  font-weight: 400;
  position: relative;
}

#plate-builder-log .default-message {
  position: absolute;
  opacity: 1;
  transition: opacity 0.25s ease;
  padding-left: 0.25rem;
  color: #a9a9a9;
}

#plate-builder-log .log-message {
  position: absolute;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding-left: 0.25rem;
}

#plate-builder-log.active .default-message {
  opacity: 0;
}

#plate-builder-log.active .log-message {
  opacity: 1;
}

.plate-builder-preview {
  padding-bottom: 3rem;
}

.plate-builder-preview .plate-background {
  display: block;
}

.modal .plate-builder-preview {
  padding: 0;
}

.plate-builder-preview .plate-fill:after {
  z-index: 1;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 3 3"><rect x="0" fill="%23fff" width="1" height="1"/><polygon points="1,0 1,1 0,1 0,3 1,3 3,3 3,0 " fill="%23000" /></svg>');
  background-repeat: repeat;
  background-size: 3px 3px;
}

.plate-builder-preview .front {
  position:...