JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="container">
    <div class="box_container">
        <div class="box">box 1</div>
        <div class="box">box 2</div>
        <div class="box">box 3</div>
        <div class="box">box 4</div>
        <div class="box">box 5</div>
        <div class="box">box 6</div>
    </div>   
</div>

CSS

.container{
    width:90%;
    padding:5%;
    display:block;
    background-color:gray;
}

.container > .box_container
{
    margin-left:auto;
    margin-right:auto;    
}

.container > .box_container > .box
{
    display:inline-block;
    background-color: rgb(167, 99, 99);
    height:200px;
    width:200px;
    margin-top:4px;
        transition-property:all;
	-moz-transition-property: all; /* Firefox 4 */
	-webkit-transition-property:all; /* Safari and Chrome */
	-o-transition-property:all; /* Opera */
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear; /* Safari and Chrome */
}

.hoverBox
{
    background-color:blue !important;
     transition-property:all;
	-moz-transition-property: all; /* Firefox 4 */
	-webkit-transition-property:all; /* Safari and Chrome */
	-o-transition-property:all; /* Opera */
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /* Safari */
	transition-timing-function: linear;
	-webkit-transition-timing-function: linear; /* Safari and Chrome */
}

JavaScript

$( document ).ready(function() {
  $( ".box" ).hover(
  function() {
    $(".box").css("background-color","rgb(24, 23, 23)");
    $( this ).addClass( "hoverBox");
  }, function() {
    $(".box").css("background-color","rgb(167, 99, 99)");
    $( this ).removeClass( "hoverBox" );
  }
);
});