JSFiddle - React, Tailwind, and code Playground

by lombi

HTML

<body>
        <div class="main-wrapper">
            <div class="project-wrapper">
                <div class="project-header">
                    <div class="column">
                        <div class="title"></div>
                        <div class="owner"></div>
                    </div>
                    <div class="column">
                        <div class="more icon"></div>
                    </div>
                </div>
                <div class="project-body">
                    <div class="badges">
                        <div class="badgde"></div>
                        <div class="badgde"></div>
                    </div>
                    <div class="project-footer">
                    <div class="column">
                        <div class="user"></div>
                        <div class="user"></div>
                        <div class="user"></div>
                    </div>
                    <div class="column">
                        <div class="share icon"></div>
                    </div>
                </div>
                </div>         
          </div>
        </div>
    </body>

CSS

body{
    margin: 0px;
}

.main-wrapper{
    max-width: 400px;
    height: 100%;
    margin: 0px auto;
   
    
}

.project-wrapper{
    display: flex;
    flex-direction: column;
    height: 320px;
    margin-top: 100px;
}

.project-header{
    display: flex;
    flex-direction: row;
    height: 40px;
    width: 100%
}
.column{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.title{
    width: 100px;
    height: 18px;
    border-radius: 3px;
    background-color: #533C86;
}

.owner{
    width: 85px;
    height: 14px;
    border-radius: 3px;
    background-color: #533C86;
    margin-top: 8px;
}

.more{
    height: 40px;
    width: 40px;
    background-color: #F4F4F4;
    margin-left: auto;
    border-radius: 100px;
}

.project-body{
    width: 400px;
    height: 265px;
    background-color: #47C7C3;
    border-radius: 3px;
    margin-top: 10px;
    display: inherit;
}

.project-footer{
    width: 400px;
    height: 60px;
    background-color: #31A8A4;
    margin-top: auto;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    display: inherit;
    flex-direction: row;
    transition: background-color 0.2s ease-out,
                padding 0.1s ease-out;
    opacity: 1;
}

.project-footer:hover{
    cursor: pointer;
    background-color: #B5B5B5;
    padding:30px;
    
}

.share{
    height: 40px;
    width: 40px;
    background-color: #F4F4F4;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 100px;
    margin-right: 10px;
    margin-left: auto;
    transition: width 0.1s ease-out,
                opacity 0.1s linear;
}

.share:hover{
    width: 100px;
    
    
}