JSFiddle - React, Tailwind, and code Playground

by DArius Shojaei

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="featured_products">
            	<img src="../Img/Edits/featured_product_3.jpg">
                <hr class="fp_bottom_border">
                <h2>Design Online</h2>
                <hr class="fp_title_below">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et 
                dolore</p>
                <a href="#" class="button fp_button">GET STARTED</a>
                
            </div>     
            
            <div class="featured_products">
            	<img src="../Img/Edits/featured_product_3.jpg">
                <hr class="fp_bottom_border">
                <h2>Design Online</h2>
                <hr class="fp_title_below">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
                incididunt ut labore et 
                dolore</p>
                <a href="#" class="button fp_button">GET STARTED</a>
                
            </div>

CSS

.featured_products {
	position:relative;
	height:460px;	
	width:250px;
	background-color:FFFFFF;
	outline: 1px solid #c9c9c9;
  margin-bottom:50px;
}
.fp_bottom_border {
	color:#0F0;
	height:10px;
	background-color:#00addc;
	margin:0px;
}
.featured_products h2 {
	color:#00addc;
	text-align: center;
	font-size:1.8em;	
	margin-top:10px;
}
.featured_products p {
	text-align: center;	
	margin-top:0px;
	padding:15px;
}
.fp_title_below {
	height:5px;
	width:150px;
	margin:0px auto;
	background-color:#00addc;	
}
.fp_button {
	position:absolute;
	top:440px;
	left:65px;
}
.button {
  display: inline-block;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.25s ease-out;
  vertical-align: middle;
  border: 1px solid #00addc;
  border-radius: 0;
  padding: 0.85em 1em;
  margin: 0 1rem 1rem 0;
  font-size: 1.0rem;
  background: #FFFFFF;
  color: #000; }
  [data-whatinput='mouse'] .button {
    outline: 0; }
 
  
  .button:hover, .button:focus { /* Changes Button Hover */
    background: #1583cc;
    color: #fff; } 
  
.fp_hover {
   -webkit-box-shadow:0px 6px 32px 0px rgba(0,0,0,0.27);
   -moz-box-shadow:0px 6px 32px 0px rgba(0,0,0,0.27);
   box-shadow:0px 6px 32px 0px rgba(0,0,0,0.27);
}

JavaScript

$(".featured_products").mouseover(function(){
        $(".fp_button").css("background-color", "#00addc");
        $(".fp_button").css("color", "#FFFFFF"); 
        $(this).addClass("fp_hover");
      });
      $(".featured_products").mouseleave(function(){
        $(".fp_button").css("background-color", "white");
        $(".fp_button").css("color", "#000000")
        $(".featured_products").removeClass("fp_hover");
      });
      
 // $(".featured_products").css("outline", "1px solid #FFFFFF");