JSFiddle - React, Tailwind, and code Playground

by borisjavier

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<p class="custom-control custom-switch">
                                    <input class="custom-control-input" id="customSwitch1" type="checkbox" checked>
                                    <label class="custom-control-label font-italic" for="customSwitch1">Feature one</label>
                                </p>
                                
                                <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <i class="fa fa-exclamation-triangle" style="color: #ffb818;"></i> 
    <!--<span class="input-group-text"></span>-->
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

CSS

<!-- Demo header-->
<section class="py-5 header text-center text-white">
    <div class="container py-4">
        <header>
            <h1 class="display-4">Bootstrap toggle switch</h1>
            <p class="font-italic mb-1">Create bootstrap toggle switches using Bootstrap custom form components.</p>
            <p class="font-italic">Snippet by
                <a class="text-white" href="https://bootstrapious.com/">
                    <u>Bootstrapious</u>
                </a>
            </p>
        </header>
    </div>
</section>


<section class="pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- Default switches with radio inputs-->
                <p class="font-italic text-muted">Standard checkbox switches - with bootstrap theme colors.</p>
                <div class="row mb-5">
                    <div class="col-lg-4">
                        <div class="card rounded-0 border-0 shadow mb-4">
                            <div class="card-body p-4 text-center">
                                <!-- Custom switch -->
                                <p class="custom-control custom-switch">
                                    <input class="custom-control-input" id="customSwitch1" type="checkbox" checked>
                                    <label class="custom-control-label font-italic" for="customSwitch1">Feature one</label>
                                </p>

                                <!-- Custom switch -->
                                <p class="custom-control custom-switch m-0">
                                    <input class="custom-control-input" id="customSwitch2" type="checkbox">
                                    <label class="custom-control-label font-italic" for="customSwitch2">Feature two</label>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div...