Gradient Mesh Contact Us Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="contactmesh-box" onsubmit="return false;"><h3>Get in Touch</h3><p>Leave a message and we'll respond in 24 hours.</p><div class="mesh-field"><label>NAME</label><input type="text" placeholder="Alex Morgan"></div><div class="mesh-field"><label>MESSAGE</label><textarea rows="3" placeholder="How can we help?"></textarea></div><button type="submit">Send Message ✨</button></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.contactmesh-box { width: 210px; background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%); border: 1px solid #dcfce7; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(22,163,74,0.08); font-family: system-ui, sans-serif; margin: auto; box-sizing: border-box; }
.contactmesh-box h3 { margin: 0; font-size: 13px; font-weight: 800; color: #14532d; }
.contactmesh-box p { margin: 2px 0 12px; font-size: 7px; color: #166534; line-height: 1.3; }
.mesh-field { margin-bottom: 8px; }
.mesh-field label { display: block; font-size: 6px; font-weight: 800; color: #15803d; margin-bottom: 3px; letter-spacing: 0.5px; }
.mesh-field input, .mesh-field textarea { width: 100%; background: #ffffff; border: 1px solid #bbf7d0; border-radius: 6px; padding: 6px; font-size: 8px; color: #0f172a; outline: none; box-sizing: border-box; resize: none; }
.contactmesh-box button { width: 100%; background: #16a34a; color: #ffffff; border: none; border-radius: 8px; padding: 8px; font-size: 8px; font-weight: 800; margin-top: 4px; cursor: pointer; box-shadow: 0 4px 12px rgba(22,163,74,0.2); }