JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c">

        <div class="base">

            <div class="cb" id="red" data-color="Red">

            </div>

        </div>

        <div class="base">

            <div class="cb" id="green" data-color="Green">

            </div>

        </div>

        <div class="base">

            <div class="cb" id="blue" data-color="Blue">

            </div>

        </div>

    </div>

CSS

.cb {

            display: inline-block;

            background-color: #56a100;

            width: 70%;

            height: 70%;

            margin-top: 15%;

            filter: alpha(opacity=50);

            -moz-opacity: 0.5;

            opacity: 0.5;

            -ms-transition: all 0.5s ease;

            -moz-transition: all 0.5s ease;

            -o-transition: all 0.5s ease;

            -webkit-transition: all 0.5s ease;

            transition: all 0.5s ease;

        }



            .cb:hover {

                display: inline-block;

                filter: alpha(opacity=100);

                -moz-opacity: 1;

                opacity: 1;

                width: 100%;

                height: 100%;

                margin-top: auto;

                -ms-transition: all 0.5s ease;

                -moz-transition: all 0.5s ease;

                -o-transition: all 0.5s ease;

                -webkit-transition: all 0.5s ease;

                transition: all 0.5s ease;

            }



        .base {

            
            width: 50px;

            height: 50px;

            margin-left: 5px;

            margin-top: 20px;

            border-style: ridge;

            text-align: center;

            vertical-align: central;
        
            float: left;
        }