JSFiddle - React, Tailwind, and code Playground

by younesalouani

HTML

<div class="user_profile_cap">

      <div class="user_profile_cover">
        <input type="file" class="cover-upload__input" id ="cover_upload"/>
       <img class="cover-image" src="https://i.imgur.com/ecOH1bw.png" alt="img" id="cover_image"/>
       
      </div>

      <div class="user_profile_headline">
          <div class="profile-upload">
          <input type="file" class="profile-upload__input" />
          <img alt="img" class="profile-image" src="https://i.imgur.com/ecOH1bw.png" alt="img"/>
          </div>
          <h2>page title</h2>
          <span>loremipsum</span>
    </div>

SCSS

.user_profile_cap {
  width: 970;
  height: auto 13;
  border: 1px solid #DDD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
    overflow:hidden;
}

.cover-image {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    height: 115px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.user_profile_headline {
  padding: 10px;
  font-size: 16px;
}
.profile-upload {
    border:1px solid #EEEEEE;
    width:124px;
    height:124px;
    float:left;
    position:relative;
    z-index:111;
    
    background-color:white;
}
.user_profile_headline h2{
 
    margin:0;
    padding:0;
    font-size:12px;
    font-weight:bold;
    display:block;   
}
.user_profile_headline span{
    font-size:10px;
    font-family:verdana;
    color:gray;
 
}

/* Style Profile Image */
.profile-image {
    display: inline-block;
    padding: 0;
    color: white;
    text-decoration: none;
    font: 0.75em/1.5 sans-serif;
    cursor: pointer;
    width: 128px;
    height: 128px;
}
.profile-upload {
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    padding: 0;
    margin:-50px 10px 0  0;
}
.profile-upload__input {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
    }
    
    /* Style Cover */ 
    .user_profile_cover {
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
}
.cover-image {
    display: inline-block;
    padding: 0;
    color: white;
    text-decoration: none;
    font: 0.75em/1.5 sans-serif;
    cursor: pointer;
}
.cover-upload__input {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
...