JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-light p-3 card">
    <form class="form-inline">
        <div class="form-row align-items-center">
            <div class="col-auto">
                <input type="text" placeholder="The team's name" class="form-control" value="" />
            </div>
            <div class="col-auto">
                <select class="form-control">
                    <option value="">Select the season</option>
                    <option value="2019">2019</option>
                    <option value="2020">2020</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary">
                    <i class="fas fa-search">&nbsp;Search</i></button>
            </div>
            <div class="col-auto">
                <div class="custom-control custom-switch align-center">
                    <input type="checkbox" class="custom-control-input" id="vpx" checked="" />
                    <label class="custom-control-label" for="vpx">Hide 0-point teams</label>
                </div>
            </div>
        </div>
    </form>
</div>