JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div id="preload">
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_01.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_02.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_03.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_04.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_05.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_06.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_07.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_08.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_09.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_10.png" width="1" height="1"/>
   <img src="https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_11.png" width="1" height="1"/>
</div>

<div class="mastheadContainer">
  <div class="mastheadLeft pillowed">
    <div class="mastheadLeftLogo"></div>
  </div>
  <div class="mastheadRight pillowed">
    <div class="mastheadText">
      <p>WELCOME TO NAVY ENTERPRISE SERVICE DESK</p>
      <p>(NESD)</p>
      <p>NAVY IT CONSOLIDATED SERVICE DESK</p>
    </div>
  </div>
</div>
<div class="verticalSpacer"></div>
<div class="pictureContainer">
  <div class="pictureRow">
    <div class="nesdPhoto nesdPhoto01 pillowed"></div>
    <div class="nesdPhoto nesdPhoto02 pillowed"></div>
    <div class="nesdPhoto nesdPhoto03 pillowed"></div>
    <div class="nesdPhoto nesdPhoto04 pillowed"></div>
    <div class="nesdPhoto nesdPhoto05...

CSS

#preload {
  display: none;
}
.pillowed {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.3), inset 0 -3px 4px rgba(0, 0, 0, 0.3), 0 0px 4px rgba(255, 255, 255, 0.9);
}

.noselect {
  cursor: not-allowed;
}

.verticalSpacer {
  height: 4px;
}

.mastheadContainer {
  min-width: 800px;
  width: 100%;
}

.mastheadLeft {
  display: inline-block;
  margin: 0 !important;
  background: white;
  height: 201px;
  width: 200px;
  vertical-align: top;
}

.mastheadLeftLogo {
  background-image: url("https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/NESD_logo.png");
  background-size: 200px 200px;
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.mastheadRight {
  display: inline-block;
  margin: 0 !important;
  background: rgba(77, 92, 112, 1);
  height: 200px;
  width: calc(100% - 208px);
  vertical-align: top;
}

.mastheadText {
  color: white;
  font-family: georgia;
  font-size: calc(3.8vw - 7px);
  text-align: center;
  height: 200px;
  line-height: 65px;
  display: grid;
}

.mastheadText>p {
  margin: 0 !important;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}

@media only screen and (min-width: 1320px) {
  .mastheadText {
    font-size: 44px;
  }
}

@media only screen and (max-width: 806px) {
  .mastheadText {
    font-size: 24px;
  }
}

.pictureContainer {
  height: 140px;
  width: 100%;
  overflow: hidden;
}

.pictureRow {
  height: 140px;
  width: 6000px;
  animation: scrollPics 180s infinite linear;
  animation-delay: 4s;
}

@keyframes scrollPics {
  0% { margin-left: 0; }
  100% { margin-left: -3245px; }
}

.nesdPhoto {
  height: 140px;
  width: 280px;
  display: inline-block;
  background-repeat: no-repeat;
}

.nesdPhoto01 {
  background-image: url("https://navy.deps.mil/peoeis/sites/nen/sandbox/RevCom/SiteAssets/1/nesd_01.png");
  width: 380px;
}

.nesdPhoto02 { background-image:...