JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<div class="roboczajen"> 
  <img src="http://78.media.tumblr.com/ff170ac33daee79f14c84cc2050ca367/tumblr_oychvtOrmt1wstih5o1_400.gif" style="max-width: 200px;	border: 2px solid #bdb59c;  z-index: 1;  position: absolute;">
 <div class="jenpas">
    <div class="jentekst">You would never break the chain
    </div>
  </div>
</div>

CSS

.roboczajen {
  width: 204px;
  height: 127px;
  border: 2px solid #b3a49a;
}

.jenpas {
  width: 200px;
  padding: 2px;
  height: auto;
  background-color: #bdb59c;
  border-top: 2px solid #b3a49a;
  border-bottom: 2px solid #b3a49a;
  margin-top: -35px;
  z-index: 999;
  position: absolute;
}

.jentekst {
  font-size: 10px;
  font-family: 'Calibri';
  color: #295159;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
	  z-index: 3;
  position: absolute;
}

JavaScript

<style>.roboczajen{width: 224px; height: 139px; border: 2px solid #b3a49a;}.jenpas{width: 220px; padding: 2px; height: auto; background-color: #bdb59c; border-top: 2px solid #b3a49a; border-bottom: 2px solid #b3a49a; margin-top: -35px; z-index: 2; position: absolute;}.jentekst{font-size: 10px; font-family: 'Calibri'; color: #295159; text-align: center; text-transform: uppercase; letter-spacing: 1px;}</style><div class="roboczajen"> <img src="http://78.media.tumblr.com/ff170ac33daee79f14c84cc2050ca367/tumblr_oychvtOrmt1wstih5o1_400.gif" style="max-width: 220px;border: 2px solid #bdb59c; z-index: 1; position: absolute;"> <div class="jenpas"> <div class="jentekst">You would never break the chain </div></div></div>