پیشنمایش زنده
کد HTML
<div class="container px-4 mx-auto">
<div class="mx-auto">
<div class="max-w-md mx-auto px-8 py-6 bg-gray-100 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Contact Us</h2>
<form>
<div class="mb-4">
<label class="block text-gray-800 mb-1" for="name">Your Name</label>
<input
class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
placeholder="Enter your name"
type="text"
/>
</div>
<div class="mb-4">
<label class="block text-gray-800 mb-1" for="email">Your Email</label>
<input
class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
placeholder="Enter your email"
name="email"
id="email"
type="email"
/>
</div>
<div class="mb-4">
<label class="block text-gray-800 mb-1" for="message"
>Your Message</label
>
<textarea
class="w-full px-4 py-2 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
rows="4"
placeholder="Enter your message"
name="message"
id="message"
></textarea>
</div>
<button
class="w-full bg-yellow-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-yellow-400 transition duration-300"
type="submit"
>
Send Message
</button>
</form>
</div>
</div>
</div>
کد CSS
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.block {
display: block;
}
.w-full {
width: 100%;
}
.max-w-md {
max-width: 28rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-yellow-300 {
--tw-bg-opacity: 1;
background-color: rgb(253 224 71 / var(--tw-bg-opacity));
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.font-semibold {
font-weight: 600;
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition {
transition-property: color, background-color, border-color, fill, stroke,
opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
-webkit-backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 {
transition-duration: 300ms;
}
.hover\:bg-yellow-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-yellow-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
}