JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Custom checkbox</title>
    <link href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/index.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/assets/favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.esm.js"
            type="module"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.js"></script>
</head>

<body>
<!--HTML content goes here-->
<h8k-navbar header="Custom checkbox"></h8k-navbar>

<div class="my-40 mx-auto">
    <div class="container">
        <div class="screen">
            <h3>Your checkbox</h3>
            <div class="form-row">
                <input type="checkbox" class="form-checkbox" id="completeTask">
                <label for="completeTask">Complete the task</label>
            </div>
        </div>

        <div class="screen">
            <h3>Template</h3>
            <div class="template">
                <h4>Unchecked</h4>
                <img src="./images/unchecked.png" width="171" />
                <h4>Checked</h4>
                <img src="./images/checked.png" width="172" />
            </div>
        </div>
    </div>
</div>

</body>
<!-- HMR and test infrastructure - DO NOT EDIT -->
<script src="./bundle.js"></script>
</html>

CSS

/* Custom Checkbox Styles */
/* Custom Checkbox Styles */
.form-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #2f2121;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
}

.form-checkbox:checked + label {
  color: #008002;
  text-decoration: line-through;
}

.form-checkbox:checked + label::before {
  content: "x";
  color: white;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-checkbox:checked {
  background-color: #008002;
  border-color: #008002;
}

/* Hide the default checkbox */
.form-checkbox[type="checkbox"] {
  display: none;
}

/* Reset default styles for the label */
label {
  display: flex;
  align-items: center;
}

/* Template styles (adjust as per your design) */
.template {
  display: flex;
  align-items: center;
}

/* Images styles (adjust width as per your design) */
.template img {
  width: 20px; /* Set the width to match the checkbox dimensions */
  margin-right: 10px; /* Add some space between the image and the text */
}