JSFiddle - React, Tailwind, and code Playground

by Trae

HTML

<article id="panel">
    <label class="col col-1" labelfor="firstname">First Name</label>
    <input class="col Error" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name1</label>
    <input class="col" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name2</label>
    <input class="col" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name3</label>
    <input class="col col-8" id="firstname" type="text" />
    <label class="col col-1" labelfor="firstname">First Name4</label>
    <input class="col" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name5</label>
    <input class="col" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name6</label>
    <input class="col" id="firstname" type="text" />
    <label class="col" labelfor="firstname">First Name7</label>
    <input class="col col-8" id="firstname" type="text" />
    <label class="col col-1" labelfor="firstname">First Name8</label>
    <input class="col" id="firstname" type="text" />
    <input class="primarybutton" id="submit" type="submit" value="Save" />
</article>

CSS

input[type="button"],
input[type="cancel"],
input[type="submit"] {
  width: 100px;
}

input[type="button"].primarybutton,
input[type="cancel"].primarybutton,
input[type="submit"].primarybutton {
  float: right;
}

.Panel header img {
    vertical-align: top;
    margin: 0px 5px 0px 0px;
}

.Panel header h3 {
  display: inline;
}

.Panel.collapsible header {
  cursor: pointer;
}

.Panel.collapsible header.open {
  background-image: url(../img/navigate_down2.png);
  background-image: url(../img/navigate_down2.png), -webkit-gradient(linear, 0% 5%, 0% 45%, from(#8a8a8a), to(#000000));
  background-image: url(../img/navigate_down2.png), linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_down2.png), -o-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_down2.png), -moz-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_down2.png), -webkit-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_down2.png), -ms-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-repeat: no-repeat;
  background-position: 99.8%, 50%, center;  
}

.Panel.collapsible header.closed {
  background-image: url(../img/navigate_up2.png);
  background-image: url(../img/navigate_up2.png), -webkit-gradient(linear, 0% 5%, 0% 45%, from(#8a8a8a), to(#000000));
  background-image: url(../img/navigate_up2.png), linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_up2.png), -o-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_up2.png), -moz-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_up2.png), -webkit-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-image: url(../img/navigate_up2.png), -ms-linear-gradient(left 5%, #8A8A8A 36%, #000000 100%);
  background-repeat: no-repeat;
 ...