JSFiddle - React, Tailwind, and code Playground

by Amit Bhagat

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="abswrapper">
<div id="bilde7" class="bilde">
  <a href="overclock.html">
    <img id="overclo" src="bilder/overclock.png" width="200" ; height="200" ;>
  </a>
</div>
</div>

CSS

.abswrapper{
  position:relative;
}

#overclock {
  left: 100px;
  padding-left: 100px;
  left: 20px;
  vertical-align: middle;
  align-content: center;
}

#bilde7 {
  width: 33%;
  height: 33%;
  top: 162%;
  left: 0%;
  position: absolute;
  background-color: #7e7e7e;
  border-radius: 10px;
  z-index: 3;
  transition: ease-out 0.1s;
}

.bilde:active {
  transform: scale(0.93);
  transition: ease-in 0.05s;
}

.bilde {
  animation: fadeInFromNone 1.2s;
  min-height:300px;
}

.bilde:hover {
  transform: scale(0.95);
  transition: ease-in 0.2s;
  border:solid 1px #b20000;
}