JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rounded-smallborder">
			<section class="img-scale img-opacity" style="width: 250px; height: 250px;">
				<img src="http://placehold.it/250x250" />
				<div class="text">
					<span>
						<h1>This is a title</h1>
						<ul>
							<li>List number 1</li>
							<li>List number 2</li>
							<li>List number 3</li>
						</ul>
					</span>
				</div>
			</section>
		</div>

CSS

div.rounded-smallborder{
    	margin-top: 22px;
    	margin-bottom: 22px;
    	height: 362px;
    	width: 228px;
    	float: left;
    	display: block;
    	margin-left: 10px;
    }
    
    div.rounded-smallborder section{
    	position: relative;
    	width: 217px;
    	height: 217px;
    	-webkit-border-radius: 100%;  
      -moz-border-radius: 100%;  
      -ms-border-radius: 100%;  
      -o-border-radius: 100%;  
      border-radius: 100%;  
    	border: 5px solid white;
    
    	-webkit-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    	-moz-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    	-ms-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    	-o-box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    	box-shadow: 0px 0px 0px 1px rgba(201, 201, 201, 1);
    
    	float:left;
    	text-align: center;
    
    	-webkit-transition: all .3s;
    	-moz-transition: all .3s;
    	-ms-transition: all .3s;
    	-o-transition: all .3s;
    	transition: all .3s;
    
    	/*overflow: hidden;*/
    	background: #dfdfdf;
    }
    
    div.rounded-smallborder section img{
    	position: absolute;
        border-radius: 100%;
    	-webkit-transition: all .3s;
    	-moz-transition: all .3s;
    	-ms-transition: all .3s;
    	-o-transition: all .3s;
    	transition: all .3s;
    
    	left: 0%;
    }
    
    
    div.rounded-smallborder section.img-slideleft:hover img{
    	margin-left: -35px;
    }
    
    div.rounded-smallborder section.img-zoomin:hover img{
    	width: 550px;
    }
    
    div.rounded-smallborder section.img-slideup:hover img{
    	margin-top: -35px;
    }
    
    div.rounded-smallborder section.img-opacity:hover img{
    	opacity: 0.2;
    }
    
    div.rounded-smallborder section.img-diagonal:hover img{
    	margin-top: -35px;
    	margin-left: -35px;
    }
    
    div.rounded-smallborder section.img-rotation:hover img{
    	-webkit-transform:rotate(360deg);
    	-o-transform:rotate(360deg);
   ...