JSFiddle - React, Tailwind, and code Playground

by umurkaragoz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<br>
<br>
<br>
<br>
<label for="">Seçim görünümü</label>
<div class="col-lg-6 input-group input-group-sm">
  <button class="input-group-addon btn btn-primary" id="basic-addon1" title="Seçilen şablonu uygular">Seç</button>
  <button class="input-group-addon btn btn-success" id="basic-addon1" title="Şu anki içeriği şablona kaydeder">Kaydet</button>
  <select type="text" class="form-control" placeholder="Yeni" aria-describedby="basic-addon1">
    <option>template 1</option>
    <option>template 2</option>
    <option>template 3</option>
  </select>
  <button class="input-group-addon btn btn-danger" id="basic-addon1" title="Seçilen şablonu siler">Sil</button>
  <button class="input-group-addon btn btn-success" id="basic-addon1" title="Yeni şablon ekler">Yeni Oluştur</button>
</div>
<br>
<label for="">Oluşturma görünümü</label>
<div class="col-lg-6 input-group input-group-sm">
  <input type="text" class="form-control" placeholder="Yeni" aria-describedby="basic-addon1">
  <button class="input-group-addon btn btn-success" id="basic-addon1">Oluştur</button>
  <button class="input-group-addon btn btn-danger" id="basic-addon1">İptal</button>
</div>
<br>
<ul>
  <li>Başta "Seçim görünümü" gelir, "Oluşturma Görünümü" gizlidir.</li>
  <li>[Seç] şablonu uygular</li>
  <li>[Kaydet] içeriği seçili şablona kaydeder (uyarı/onaylama çıkar)</li>
  <li>[Sil] seçili şablonu siler (uyarı/onaylama çıkar)</li>
  <li>[Yeni Oluştur] tıklanınca "Seçim Görünümü" gider "Oluşturma görünümü" gelir</li>
  <li>[Oluştur] girilen isim ile şablon oluşturur ve şu anki içeriği kaydeder</li>
  <li>[İptal] "Seçim Görünümüne" geri döner</li>
</ul>