JSFiddle - React, Tailwind, and code Playground

by Rohit Totala

HTML

<body>
    
     <div id="card">        
               <p  class="name" >  
               Sam Fellig </p><p  class="add">New York,US</p>
            <p class="info"> From a non-technical guy with an idea to  building one of 
            TIME's Top 50 sites of 2013, Sam Fellig's story is nothing less  than 
            magical. But the founder of Outgrow.me says anyone can learn, as long as
              they stay positive.</p>
          </div>
</body>

CSS

#card {
    width: 370px;
    height: 570px;
    background-color:  white;
    position: absolute;
    top: 0px;
    left: 0px;
}


#card:hover{
    background-color: #63C2A1;
    display: block;
}
#card p.name {
    font-family: DOSIS;
    font-weight: light;
    font-size: 22px;
    position: absolute;
    left: 139px;
    top: 210px;
color:#1F2B40;
    display: block;
   
}
#card p.add {
    font-family: Oswald;
    font-weight: lighter;
    position: absolute;
    left: 120px;
    top: 247px;
    font-size: 29px;
    color: #434445;
    line-height: 50%;
display: block;
}
#card p.info {
    font-family: Open Sans;
    font-weight: lighter;
    color:#434445;
    position: absolute;
    top: 260px;
    padding: 70px;
    text-align: center;
    display: block;
}
        #card p {
      display:  inline-block;
          }
#card:hover > p{
    color: white;
}