JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <form class="form-signin">
    <div class="card mt-3 ms-3 p-3" style="width: 30rem;">
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
        <div class="input-group-append">
          <span class="input-group-text" id="basic-addon2">@madeup.url</span>
        </div>
      </div>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; 2021</p>
      </div>
    </form>
<ol>
<li>something <span>></span></li>
<li>second</li>
<li>last</li>
</ol>

CSS

ol li:not(:last-child){
  display: none;
}
.input-group-append {
  display: none;
}