JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<div class="color-and-text-input">
  <div class="color-wrapper">
    <input type="color">
  </div>

  <input type="text ">
</div>

CSS

.color-and-text-input {
  display: flex;
  align-items: flex-end;
  width: 400px;
  border: 1px solid red;
}

.color-wrapper {
  width: 48px;
  height: 48px;
  margin-bottom: 2px;
}

input[type="color"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type="color"]::-moz-color-swatch-wrapper {
	padding: 0;
}

.color-and-text-input input[type="text"] {
  width: 100%;
  height: 100%;
  margin-left: 10px;
}


::-moz-color-swatch {
    border-color: red;
}