Design for AICupom com código tracejado
Cupom com código tracejado: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
25%off
Launch week deal
Valid on annual plans until Friday.
LAUNCH25
CSS
.card-076 {
display: flex;
width: 340px;
background: #fff;
border: 2px solid #16a34a;
border-radius: 14px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #14532d
}
.card-076__off {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #16a34a;
color: #fff
}
.card-076__off b {
font-size: 30px;
font-weight: 800;
line-height: 1
}
.card-076__off span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .1em
}
.card-076__body {
padding: 16px 18px
}
.card-076 h3 {
margin: 0 0 2px;
font-size: 16px
}
.card-076 p {
margin: 0 0 10px;
font-size: 12px;
color: #4d7c0f
}
.card-076 code {
display: inline-block;
padding: 6px 12px;
border: 2px dashed #16a34a;
border-radius: 8px;
background: #f0fdf4;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
cursor: copy;
transition: background .15s,color .15s
}
.card-076 code:hover {
background: #16a34a;
color: #fff
}
HTML
<article class="card-076">
<div class="card-076__off"><b>25%</b><span>off</span></div>
<div class="card-076__body">
<h3>Launch week deal</h3>
<p>Valid on annual plans until Friday.</p>
<code>LAUNCH25</code>
</div>
</article>Prompt
Crie um card de cupom de 340px: branco com borda verde de 2px #16a34a e raio de 14px. À esquerda uma coluna verde sólida de 100px com "25%" em 30px extra-bold sobre um "off" em caixa alta 12px, em branco. Corpo à direita: título 16px, nota 12px #4d7c0f, e um código promocional "LAUNCH25" em uma caixa tracejada verde de 2px sobre #f0fdf4 com letter-spacing amplo que inverte para verde sólido com texto branco no hover (cursor: copy).