<!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --e_blue: #16569a;
    --e_light: #FAFAFA;
}

.my-wrap {
    font-family: 'Poppins', sans-serif;
}

.custom-form {
    position: relative;
    margin-bottom: 1rem;
}

.custom-form > .custom-form-label > label {
    position: relative;
    padding: 0.2rem 1.5rem;
    text-align: center;
    font-size: 60%;
    margin-bottom: 0;
}

.custom-form > .custom-form-label > label {
    color: #fff;
    background: var(--e_blue);
}

.custom-form > .custom-form-label > label::before {
    top: 4px;
    left: -12px;
    border-radius: 6px 0 0 0;
    transform: rotate(35deg);
    background: linear-gradient(145deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::before {
    background: linear-gradient(145deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::before, .custom-form > .custom-form-label > label::after {
    position: absolute;
    content: '';
    display: block;
    width: 31px;
    height: 31px;
}

.custom-form > .custom-form-label > label::after {
    top: 4px;
    right: -12px;
    border-radius: 0 6px 0 0;
    transform: rotate(-35deg);
    background: linear-gradient(215deg, #fff 56%, #ffffff00 50%);
}

.custom-form > .custom-form-label > label::after {
    background: linear-gradient(215deg, var(--e_blue) 56%, #ffffff00 50%);
}

.custom-form-panel {
    height: 90%;
}

.custom-form > .custom-form-control {
    padding: .6rem 1rem;
    border-radius: 7px;
    min-width: 295px;
    text-align: center;
}

.custom-form > .custom-form-control {
    border: solid 2px var(--e_blue);
    color: var(--e_blue);
    background: #FAFAFA;
}

*:focus {
    outline: none;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="text-center my-wrap pt-5 pb-5">
  <h1 class="h3 mb-3 font-weight-bold text-uppercase" style="color: var(--e_blue)">Custom Input Textbox</h1>
  <div class="custom-form">
    <div class="custom-form-label">
        <label for="userid">Email Address</label>
    </div>
    <input type="text" name="userid" class="custom-form-control" placeholder="" required="">
  </div>
  <div class="custom-form">
    <div class="custom-form-label">
        <label for="password">Password</label>
    </div>
    <input type="password" name="password" class="custom-form-control" placeholder="" required="">
  </div>
</div><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>