JSFiddle - React, Tailwind, and code Playground

by dgoodw01

HTML

<div id="refills">
		<div>
		<img src="https://mobilescripts.com/DrugImages/AUR00170.jpg" class="drugimage">		<strong>AMOXICILLIN 500MG CAP</strong><br><br>
		<strong>Quantity:</strong> 30<br>
		<strong>Refills Remaining:</strong> 2		<span class="refillLink" data-rx="111593700">Refill»</span><h5 style="color:red"></h5>	</div>
		<div class="EmptyRx">
		<img src="https://mobilescripts.com/DrugImages/SLX03030.jpg" class="drugimage">		<strong>XIFAXAN 550MG TAB</strong><br><br>
		<strong>Quantity:</strong> 60<br>
		<strong>Refills Remaining:</strong> 2		<h5 style="color:red">Prescription is expired.</h5>	</div>
		<div class="EmptyRx">
		<img src="https://mobilescripts.com/DrugImages/GSO01551.jpg" class="drugimage">		<strong>LIPITOR 10MG TAB</strong><br><br>
		<strong>Quantity:</strong> 6<br>
		<strong>Refills Remaining:</strong> 3		<h5 style="color:red">Prescription has been deactivated by the pharmacist.</h5>	</div>
	</div>

CSS

body {
	position: absolute;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #efefef;
	background-image: url(../images/bg.png) no-repeat top center;
	font-family: sans-serif, arial, verdana, helvetica;
	font-size: small;
}

img.drugimage {
  max-height: 100%;
  max-width: 100%;
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

#refills {
	max-height: 500px;
	overflow-y: auto;
}

#refills > div {
	border: 2px solid #cccccc;
	background-color: #eeeeee;
	padding: 10px 10px;
	margin-bottom: 20px;
	position: relative;
	border-radius: 4px;
  height: 70px;
}

#refills > div.EmptyRx {
	opacity: 0.4;
	filter: e("alpha(opacity=40)");
	border-color: #cccccc !important;
}

#refills > div > span {
	position: absolute; 
	right: 4px;
	top: 10px;
	font-size: 4em;
	color: #175ba9;
	cursor: pointer;
}

#refills > div > span.refillLink {
	color: #cccccc;
}

#refills > div > span.refillLink:hover {
	color: #175ba9;
}

#refills > div:hover {
	background-color: #efefef;
	border-color: #598cc7;
}