JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<div class="outer" style="width: 188.05px; height: 232.05px; left: 216.902px; top: 179.605px; position: absolute; transform: rotate(29.5194deg);">
  <div style="filter: drop-shadow(rgb(238, 130, 238) 2.9px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px 2.9px 0px) drop-shadow(rgb(238, 130, 238) -2.9px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px -2.9px 0px) drop-shadow(rgb(238, 130, 238) 2.9px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px 2.9px 0px) drop-shadow(rgb(238, 130, 238) -2.9px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px -2.9px 0px); width: calc(100% - 11.6025px); height: calc(100% - 11.6025px); padding: 5.80125px;">
    <img src="https://plicimgstaging-d6d.kxcdn.com?url=https%3A%2F%2Fplic-staging.s3.amazonaws.com%2Fphotos%2Ff1bfff48-786b-4da6-826a-b3e8b5a16f7b%2Foriginal%2FAbuhajah-Frank-01099-00009.JPG%3FAWSAccessKeyId%3DAKIAJQNN2KXEVG2LP42A%26Expires%3D1513133016%26Signature%3DFrHC9Ud14xV8ez%252FWFAb1F7y5NXk%253D&amp;op=resize,rotate&amp;deg=auto&amp;mode=clip&amp;filter=bilinear&amp;q=90&amp;w=300&amp;plic-ref=plicbook-staging&amp;sig=f85b6256f956daea32c86825212aba888868884f"></div>
</div>

<div class="outer" style="width: 186.59px; height: 108.28px; left: 97.5957px; top: 167.53px; position: absolute; transform: rotate(32.4065deg); cursor: default;">
  <div style="filter: drop-shadow(rgb(238, 130, 238) 2.33px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px 2.33px 0px) drop-shadow(rgb(238, 130, 238) -2.33px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px -2.33px 0px) drop-shadow(rgb(238, 130, 238) 2.33px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px 2.33px 0px) drop-shadow(rgb(238, 130, 238) -2.33px 0px 0px) drop-shadow(rgb(238, 130, 238) 0px -2.33px 0px); width: calc(100% - 9.3295px); height: calc(100% - 9.3295px); padding: 4.66475px;">
    <img...

CSS

img {
  position: relative;
  width: 100%;
  height: 100%;
}

.outer {
  border: 1px solid transparent;
}

div.outer::hover {
  border: 1px solid blue;
}