JSFiddle - React, Tailwind, and code Playground

HTML

<p>
test content
</p>

<div>
  <!-- Try adding disabled or checked attributes to test different states -->
  <input id="newsletter" name="newsletter" valu="newsletter" type="checkbox" />
  <label for="newsletter">Join Newsletter</label>
</div>

<div>
  <button type="button">
  Toggle Indeterminate
  </button>
</div>


<p>
<a href="https://unfetteredthoughts.net/2017/08/23/you-might-not-need-web-components/" target="_blank">You might not need web components</a>
</p>

CSS

[type="checkbox"] {
  /* typical visually hidden css */
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

[type="checkbox"] + label {
  display: inline-block;
  font-size: 1.250rem;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  height: 1.5rem;
  margin: 1rem 0;
  padding-left: 2rem;
  position: relative;
}

[type="checkbox"] + label:before {
  background-color: #fff;
  border: 0.125rem solid rgba(1,1,1,.54);
  border-radius: 0.125rem;
  box-sizing: border-box;
  content: '';
  height: 1.5rem;
  left: 0;
  position: absolute;
  transition: background-color .3s;
  width: 1.5rem;
}

[type="checkbox"]:focus + label:before {
    outline: auto 2px Highlight;
    outline: auto 5px -webkit-focus-ring-color;
}

[type="checkbox"]:checked + label:before {
  border: 0;
  background-color: #009688;
  transition: background-color .3s;
}

[type="checkbox"]:checked + label:after {
  border-color: #fff;
  border-style: solid;
  border-width: 0 0.125rem 0.125rem 0;
  content: '';
  display: block;
  height: 1rem;
  left: .5rem;
  position: absolute;
  transform: rotate(45deg);
  top: 0;
  width: .375rem;
}

[type="checkbox"]:indeterminate + label:before {
  border: 0;
  background-color: #3B99FC;
  transition: background-color .3s;
}

[type="checkbox"]:indeterminate + label:after {
  background-color: #fff;
  content: '';
  display: block;
  height: 0.125rem;
  left: 0.31rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
}

[type="checkbox"]:disabled + label:before {
  background-color: rgba(158, 158, 158, .54);
}

JavaScript

var checkbox = document.getElementById('newsletter');

document.querySelector('button').addEventListener('click', function (event) {
	checkbox.indeterminate = !checkbox.indeterminate;
});