galaxy/Cards/Yaya12085_ugly-mule-59.html

<div class="code-editor">
      <div class="header">
        <span class="title">CSS</span>
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="icon"><g stroke-width="0" id="SVGRepo_bgCarrier"></g><g stroke-linejoin="round" stroke-linecap="round" id="SVGRepo_tracerCarrier"></g><g id="SVGRepo_iconCarrier"> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M6 6L18 18"></path> <path stroke-linecap="round" stroke-width="2" stroke="#4C4F5A" d="M18 6L6 18"></path> </g></svg>
      </div>
      <div class="editor-content">
        <code class="code">
          <p><span class="color-0">.code-editor </span> <span>{</span></p>

          <p class="property">
            <span class="color-2">max-width</span><span>:</span>
            <span class="color-1">300px</span>;
          </p>
          <p class="property">
            <span class="color-2">background-color</span><span>:</span>
            <span class="color-preview-1"></span><span class="">#1d1e22</span>;
          </p>
          <p class="property">
            <span class="color-2"> box-shadow</span><span>:</span>
            <span class="color-1">0px 4px 30px  <span class="color-preview-2"></span><span class="color-3">rgba(</span>0, 0, 0, 0.5<span class="color-3">)</span></span>;
          </p>
          <p class="property">
            <span class="color-2">border-radius</span><span>:</span>
            <span class="color-1">8px</span>;
          </p>
          <span>}</span>
        </code>
      </div>
    </div>
<style>
/* From Uiverse.io by Yaya12085 - Tags: card, dark, editor, code */
.code-editor {
  max-width: 300px;
  background-color: #1d1e22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 2px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
}

.title {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: rgb(212 212 212);
}

.icon {
  width: 20px;
  transition: .2s ease;
}

.icon:hover {
  cursor: pointer;
  border-radius: 50px;
  background-color: #6e7281;
}

.editor-content {
  margin: 0 10px 10px;
  color: white;
}

.property {
  margin-left: 30px;
}

.property:hover {
  cursor: text;
}

.editor-content .color-0 {
  color: rgb(86 156 214);
}

.editor-content .color-1 {
  color: rgb(182 206 168);
}

.editor-content .color-2 {
  color: rgb(156 220 254);
}

.editor-content .color-3 {
  color: rgb(207 146 120);
}

.color-preview-1,.color-preview-2 {
  height: 8px;
  width: 8px;
  border: 1px solid #fff;
  display: inline-block;
  margin-right: 3px;
}

.color-preview-1 {
  background-color: #1d1e22;
}

.color-preview-1 {
  background-color: rgba(0, 0, 0, 0.5);
}
</style>