JSFiddle - React, Tailwind, and code Playground

HTML

<div class="service-box">
  
  <p class="box-title">Social Media</p>

  <div class="service-overbox">
   
    <h2 class="title">Social Media</h2>
    
    <p class="tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac sodales lorem. Donec condimentum feugiat feugiat. Vestibulum blandit dolor risus, eget fringilla sem suscipit vel. In id ex ut nulla mollis suscipit nec in velit. Fusce auctor dapibus elit. Nam in justo sapien.</p>

  </div>

</div>

CSS

.service-box .overtext {
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
    }

    .service-box .title {
        text-align: center;
        opacity: 0;
        transition-delay: 0.1s;
        transition-duration: 0.2s;
    }

    .service-box:hover .title,
    .service-box:focus .title {
        opacity: 1;
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
    }

    .service-box .tagline {
        text-align: center;
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.2s;
    }

    .service-box:hover .tagline,
    .service-box:focus .tagline {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
    
    .service-overbox {
        background-color: #000000;
        position: relative;
        color: #fff;
        z-index: 2;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        opacity: 0;
        width: 100%;
        height: 100%;
        padding: 30px;
    }

    .service-box:hover .service-overbox { opacity: 0.7; }
    .service-box:hover .box-title { opacity: 0; }
    
    .service-box {
        cursor: pointer;
        position: relative;
        overflow: auto;
        height: 380px;
        width: 100%;
        max-width: 580px!important;
        background-image: url(http://www.voicecommunications.co.uk/voice-website-new/wp-content/uploads/2016/07/voice-social-media.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    
    .box-title {
        position: absolute;
        top: 40%;
      ...