JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="form-submit">
    <input type="text" class="input" placeholder="Cursus Ornare Cras">
    <button class="btn" type="submit">Submit</button>
</div>

SCSS

$height: 45px;
$border-radius: 30px;

* {
  box-sizing: border-box;
}

body {
    padding: 10%;
}

.form-submit {
    display: flex;
    overflow: hidden;
    
    background: #fff;
    border: 0;
    border-radius: $border-radius;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,0.3);
    
    .input,
    .btn {
        height: $height;
        
        background: none;
    }

    .input {
        font-size: 16px;
        
        flex: 1;
        padding-left: 30px;
        
        border: 0;
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
    }
    
    .btn {
        font-size: 16px;
        
        padding: 0 30px;
        margin-right: -1px;
        
        text-transform: uppercase;
        
        background: green;
        border: 0;
        border-radius: $border-radius;
        color: #fff;
        cursor: pointer;
    }
}