Создание компонента рассылки новостей с помощью React и Tailwind CSS
В постоянно развивающемся ландшафте веб-разработки создание привлекательных и удобных для пользователей компонентов имеет решающее значение. Одним из таких важных элементов является форма подписки на рассылку, которая позволяет пользователям оставаться на связи с вашей платформой. В этой статье мы рассмотрим, как создать элегантный и отзывчивый компонент подписки на рассылку с помощью React и Tailwind CSS.
Создание основы
Чтобы начать, давайте посмотрим на представленный фрагмент кода. Этот React-компонент получил меткое название "Newsletter" и предназначен для легкой интеграции в любое React-приложение. Он чист, лаконичен и использует популярный CSS-фреймворк Tailwind для стилизации.
// Newsletter.jsx
import React from 'react';
const Newsletter = () => {
return (
<div className='w-full py-16 text-white bg-[#000300] px-4'>
<div className='max-w-[1240px] mx-auto grid lg:grid-cols-3'>
<div className='lg:col-span-2 my-4'>
<h1 className='md:text-4xl sm:text-3xl text-2xl font-bold py-2'>
Want tips & tricks to optimize your flow?
</h1>
<p>Sign up to our newsletter and stay up to date.</p>
</div>
<div className='my-4'>
<div className='flex flex-col sm:flex-row items-center justify-between w-full'>
<input
className='p-3 flex w-full rounded-md text-black'
type='email'
placeholder='Enter Email'
/>
<button className='bg-[#00df9a] text-black rounded-md font-medium w-[200px] ml-4 my-6 px-6 py-3'>
Notify Me
</button>
</div>
<p>
We care bout the protection of your data. Read our{' '}
<span className='text-[#00df9a]'>Privacy Policy.</span>
</p>
</div>
</div>
</div>
);
};
export default Newsletter;Компонент Newsletter построен таким образом, чтобы быть гибким и легко интегрироваться в ваше приложение.
Интеграция с приложением
Теперь давайте посмотрим, как легко этот компонент может быть интегрирован в приложение React.
// App.jsx
import React from "react";
import Newsletter from "./components/Newsletter";
function App() {
return (
<div>
<Newsletter />
</div>
);
}
export default App;Компонент App служит точкой входа для нашего приложения и включает в себя компонент Newsletter.
Ключевые особенности
- Отзывчивый дизайн: Использование классов Tailwind CSS обеспечивает плавную адаптацию компонента рассылки к различным размерам экрана.
- Четкая подача информации: Компонент четко передает свою цель, приглашая пользователей подписаться на ценные советы и рекомендации.
- Удобная форма: Удобный дизайн формы с хорошо расположенным полем для ввода email и визуально привлекательной кнопкой "Уведомлять меня".
- Гарантия конфиденциальности: Лаконичное сообщение внизу заверяет пользователей в защите данных, а ссылка на политику конфиденциальности выделена особым цветом.
