JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="container contact">
    <div class="_heading">
        <div class="font-regular">Get in Touch</div>
        <div class="font-bold">With Us</div>
    </div>
    <div class="_body">
        <div class="_c-side">
            <div class="head">
                <div class="font-regular">Contact</div>
                <div class="font-bold">Informations</div>
            </div>
            <ul>
                <li>
                    <div class="icon">
                        <i class="wiz wiz-phone"></i>
                    </div>
                    <div class="desc">
                        <div class="font-bold">Phone:</div>
                        <div class="font-regular">
                            <a href="tel:3232">121212</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="icon">
                        <i class="wiz wiz-address"></i>
                    </div>
                    <div class="desc">
                        <div class="font-bold">Address:</div>
                        <div class="font-regular">
                            <a href="javascript:">Address: 500 Terry Francois St. San Francisco, CA 94158
                            </a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="icon">
                        <i class="wiz wiz-envelope-new"></i>
                    </div>
                    <div class="desc">
                        <div class="font-bold">Email:</div>
                        <div class="font-regular">
                            <a href="mailto:[email protected]">[email protected]</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="_c-side">
            <div class="head">
                <div class="font-regular">Send Us</div>
                <div...

CSS

/* START OF _PROFILE-1 */
.dv {
    display: inline-block;
    vertical-align: middle;
}

.container ._main-profile {
    width: 100%;
    position: relative;
    font-size: 0px;
}

.container ._main-profile .side {
    font-size: 16px;
    position: relative;
}

.container ._main-profile .side:nth-child(1) {
    width: 500px;
    display: inline-block;
    vertical-align: top;
}

.container ._main-profile .side:nth-child(2) {
    width: calc(100% - 500px);
    display: inline-block;
    vertical-align: top;
}

.container ._main-profile .side .user {
    position: relative;
    display: inline-block;
    margin-bottom: 32px;
    padding-left: 42px;
}

.container ._main-profile .side .user .circle {
    width: 191px;
    padding-top: 100%;
    position: relative;
}

.container ._main-profile .side .circle img._border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 3;
}

.container ._main-profile .side .circle .image {
    width: 98%;
    height: 98%;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

.container ._main-profile .side .user-name {
    margin-bottom: 28px;
    padding-left: 42px;
}

.container ._main-profile .side .user-name span:nth-child(1) {
    font-size: 33.5px;
    line-height: 33px;
    color: white;
    text-transform: capitalize;
    margin-right: 10px;
    display: inline-block;
}

.container ._main-profile .side .user-name span:nth-child(2) {
    font-size: 33.5px;
    line-height: 33px;
    color: white;
    text-transform: capitalize;
    display: inline-block;
}

.container ._main-profile .side.left-side ul.description {
    margin: 0;
    padding: 0;
    list-style: none;
    padding-left: 42px;
}

.container ._main-profile .side.left-side ul.description li {
    position: relative;
    margin-bottom: 21px;
    font-size: 23px;
    line-height: 38.5px;
    color: white;
}

.container ._main-profile...