JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<link rel="stylesheet" href="//cantcool.github.io/id80994_nerds/css/style.css">
<div class="shop-main-filter" style="margin: 0 0 0 20px;">
    <form action="#" method="post">
         <h3>СТОИМОСТЬ:</h3>

        <div class="range-slider">
            <div class="range-bar">
                <div class="range-filled"></div>
            </div>
            <div class="slider slider-min"></div>
            <div class="slider slider-max"></div>
        </div>
        <div class="range-inputs clearfix">
            <div class="range-min">
                <label for="price-from">ОТ</label>
                <input type="text" id="price-from" name="price-from" value="0">
            </div>
            <div class="range-max">
                <label for="price-to">ДО</label>
                <input type="text" id="price-to" name="price-to" value="15000">
            </div>
        </div>
         <h3>Сетка:</h3>

        <input type="radio" name="setka" value="setka-1" id="setka-1" checked="">
        <label class="for-custom-input" for="setka-1">Адаптивная</label>
        <input type="radio" name="setka" value="setka-2" id="setka-2">
        <label class="for-custom-input" for="setka-2">Фиксированная</label>
        <input type="radio" name="setka" value="setka-3" id="setka-3">
        <label class="for-custom-input" for="setka-3">Резиновая</label>
         <h3>ОСОБЕННОСТИ:</h3>

        <input type="checkbox" name="spec" value="spec-1" id="spec-1" checked="">
        <label class="for-custom-input" for="spec-1">Слайдер</label>
        <input type="checkbox" name="spec" value="spec-2" id="spec-2">
        <label class="for-custom-input" for="spec-2">Блок преимуществ</label>
        <input type="checkbox" name="spec" value="spec-3" id="spec-3" checked="">
        <label class="for-custom-input" for="spec-3">Новости</label>
        <input type="checkbox" name="spec" value="spec-4" id="spec-4">
        <label class="for-custom-input" for="spec-4">Галерея</label>
        <input...

CSS

label.for-custom-input {
    display: block;
}

.shop-main-filter input[type="radio"] + label, 
.shop-main-filter input[type="checkbox"] + label {
    margin-left: 0;
    text-indent: inherit; /* чтобы убрать заданное в стиле */
    padding-left: 32px;  /* место для кастомного чекбокса/радиобокса */ 
}
.shop-main-filter input[type="radio"] + label:before, 
.shop-main-filter input[type="checkbox"] + label:before {
  margin-right: 0; /* сбросить заданное значение в стилях, этот отступ задавть не нужно, падинг у label уже приготовил место */
  left: 0;
}