JSFiddle - React, Tailwind, and code Playground

by daniars

HTML

<div class="main__container">
            <div class="main__content">
                <p class="zaga">
                    I’m Samarjit,
                    A Problem solver
                    and a Storyteller
                </p>
                <div class="buttond">
                    <a class="you" href="#"><p>About me</p></a>
                    <a class="cont" href="#"><p>Contact Me</p></a>
                </div>
            </div>
  
        </div>

CSS

.main__container {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main__content {
    width: 567px;
    font-size: 24px;
    color: #fff;
}
.zaga{
    font-weight: 600;
    font-size: 64px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #403930;
    margin-bottom: 14px;
    left: 84px;
    top: 274px;
}
.buttond{
    height: 84px;
}
.you {
    padding: 24px 40px;
    height: 84px;
    background: #FCA61F;
    border-radius: 16px;
    display: inline-block;
    width: 270px;
}
.you p{
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    color: #F3F2FF;
    margin: 0px 25px;
}
.cont {
    padding: 24px 40px;
    height: 84px;
    border: 4px solid #4D5566;
    border-radius: 16px;
    display: inline-block;
    margin-left: 16px;
    width: 269px;
}
.cont p{
    font-family: 'Work Sans';
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: #4D5566;
    margin: 0px 12px;
}