JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<link
  href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
  rel="stylesheet"
  id="bootstrap-css"
/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>

<div class="container-fluid py-5" style="background: #dddcda">
  <div class="container">
    <div class="row my-5 justify-content-center">
      <div
        class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10"
      >
        <div class="email-signature6">
          <div class="signature-details">
            <div class="signature-icon">
              <i class="fa fa-user"></i>
            </div>
            <h4 class="title">Hifni Shahzard Nazeer</h4>
            <span class="post">IT</span>
            <ul class="icon">
              <li><a href="" class="fa fa-facebook"></a></li>
              <li><a href="" class="fa fa-google-plus"></a></li>
              <li><a href="" class="fa fa-twitter"></a></li>
            </ul>
          </div>
          <ul class="signature-content">
            <li><span>A</span>#2021 Lorem Ipsum</li>
            <li><span>M</span> +0987654321</li>
            <li><span>T</span> (123) 456-7890</li>
            <li><span>E</span> [email protected]</li>
            <li>
              <a href=""><span>www.yourwebsite.com</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.email-signature6{font-family:Poppins,sans-serif;background:#fff;position:relative}
.email-signature6 .signature-details{color:#fff;background:#124680;text-align:center;text-transform:uppercase;width:50%;padding:20px;display:inline-block}
.email-signature6 .signature-icon{color:#124680;background:#efefef;font-size:60px;text-align:center;line-height:100px;width:100px;height:100px;margin:0 auto 20px;border-radius:50%}
.email-signature6 .title{font-size:25px;font-weight:700;letter-spacing:1px;margin:0}
.email-signature6 .post{display:block;font-size:17px;letter-spacing:1px;margin:0 0 15px}
.email-signature6 .icon{font-size:16px;padding:0;margin:0;list-style:none}
.email-signature6 .icon li{display:inline-block;margin:0 5px}
.email-signature6 .icon li a{color:#124680;background-color:#fff;text-align:center;line-height:28px;height:28px;width:28px;border-radius:50%;transition:all .3s ease 0s}
.email-signature6 .icon li a:hover{color:#fff;background-color:#124680;box-shadow:0 0 0 2px #fff;text-decoration:none;}
.email-signature6 .signature-content{width:170px;margin:0;padding:0;list-style:none;position:absolute;right:25%;top:50%;transform:translateY(-50%) translateX(50%)}
.email-signature6 .signature-content li{color:#476670;font-size:14px;font-weight:300;margin-bottom:12px}
.email-signature6 .signature-content li span{color:#124680;font-weight:600;margin-right:7px;display:inline-block}
.email-signature6 .signature-content li:last-child{margin:0}
.email-signature6 .signature-content li a span{margin:0}
@media screen and (max-width:479px){.email-signature6 .signature-details{width:100%;padding:20px}
.email-signature6 .title{font-size:20px}
.email-signature6 .signature-content{text-align:center;position:relative;top:auto;bottom:0;right:50%;transform:translateY(0) translateX(50%)}
}