JSFiddle - React, Tailwind, and code Playground

by kang cahya

HTML

<link rel="stylesheet" href="http://metroui.org.ua/css/metro-icons.css">
<link rel="stylesheet" href="http://metroui.org.ua/css/metro.css">
<script src="http://metroui.org.ua/js/metro.js"></script>
<div class="tile fg-white bg-orange" data-role="tile">
  <div class="tile-content">
    <img class="cs-img-add-media" src="https://4.bp.blogspot.com/-bJxsvMn8aW4/VxVw_6yUmdI/AAAAAAAAJFQ/wmJ8C3KE4Ugb4NLpxSDJZ74V3YMFZBe6gCLcB/s200/nature%2Bjpg.jpg">
    <input id="cs-img-add-media" type="checkbox">
    <div class="tile-label cs-tile-label">
      <!-- tulis label disini -->
    </div>
  </div>
</div>

CSS

#cs-img-add-media{
  display: none;
}

JavaScript

$("[data-role='tile']").click(function() {
  if ($(this).hasClass("element-selected")) {
    $(this).removeClass("element-selected");
    $("#cs-img-add-media").prop("checked", false);
  } else {
    $(this).addClass("element-selected");
    $("#cs-img-add-media").prop("checked", true);
  }
});