JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:300px!important;width:200px!important">

<div class="projects_container_proj two columns" style="margin-left:0;float:left!important;width:305px" onclick="window.location='http://www.google.com';">

		<div class="project_list_s3">

			<ul class="slides_container jcarousel-skin-tango" style="list-style-type: none;margin-left:0;padding-left:0">
				<li>
					<div class="slides_item post-thumb" style="background:#ededed!important" onmouseover="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0.6)'); $(this).find('.magnify_this_thumb').css('left', '51%').css('opacity',1); $(this).find('.hyperlink_this_thumb').css('left', '43%').css('opacity',1); $(this).children('div').css('background','#8ec252');  $(this).find('.p_title a').css('color', 'white'); $(this).find('.p_exerpt p').css('color', 'white'); $(this).find('.p_title').css('border-top', '0');" onmouseout="$(this).find('.hover_the_thumbs').css('background-color','rgba(0, 0, 0, 0)'); $(this).find('.magnify_this_thumb').css('left', '-15%').css('opacity',0); $(this).find('.hyperlink_this_thumb').css('left', '105%').css('opacity',0); $(this).children('div').css('background','#fff'); $(this).find('.p_exerpt p').css('color', ''); $(this).find('.p_title a').css('color', ''); $(this).children('div').css('background','#ededed');  $(this).find('.p_title').css('border-top', '0');">
						<ul class="ch-grid" style="list-style-type: none;margin-left:0;padding-left:0">
							<li style="padding-bottom:0">
								<div class="ch-item">
									<a style="position: relative; float: left; width: 100%; height: 100%; overflow:hidden;" href="/?post_type=portfolio&#038;p=1333">
										<img class="img_thumb" alt="" src="http://placehold.it/305x200" style="position:relative; height:100%; width: 100%;" /></a>
										<a class="flex_this_thumb" href="#"></a>
										
								<div class="hover_the_thumbs" style="position: absolute; float: left; width: 100%; height:...