Blog
Two Column With SignUp
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
const posts = [
{
title: "Boost your conversion rate",
href: "#",
description:
"Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.",
date: "Mar 16, 2020",
datetime: "2020-03-16",
},
{
title: "How to use search engine optimization to drive sales",
href: "#",
description:
"Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.",
date: "Mar 10, 2020",
datetime: "2020-03-10",
},
{
title: "Improve your customer experience",
href: "#",
description:
"Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.",
date: "Feb 12, 2020",
datetime: "2020-02-12",
},
{
title: "Writing effective landing page copy",
href: "#",
description:
"Ipsum voluptates quia doloremque culpa qui eius. Id qui id officia molestias quaerat deleniti. Qui facere numquam autem libero quae cupiditate asperiores vitae cupiditate. Cumque id deleniti explicabo.",
date: "Jan 29, 2020",
datetime: "2020-01-29",
},
];
export default function Example() {
return (
<div className="bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div className="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
<div>
<h2 className="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
Press
</h2>
<div className="mt-3 sm:mt-4 lg:grid lg:grid-cols-2 lg:gap-5 lg:items-center">
<p className="text-xl text-gray-500">
Get weekly articles in your inbox on how to grow your business.
</p>
<form className="mt-6 flex flex-col sm:flex-row lg:mt-0 lg:justify-end">
<div>
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email-address"
type="email"
autoComplete="email"
required
className="appearance-none w-full px-4 py-2 border border-gray-300 text-base rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 lg:max-w-xs"
placeholder="Enter your email"
/>
</div>
<div className="mt-2 flex-shrink-0 w-full flex rounded-md shadow-sm sm:mt-0 sm:ml-3 sm:w-auto sm:inline-flex">
<button
type="button"
className="w-full bg-blue-600 px-4 py-2 border border-transparent rounded-md flex items-center justify-center text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:inline-flex"
>
Notify me
</button>
</div>
</form>
</div>
</div>
<div className="mt-6 pt-10 grid gap-16 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
{posts.map((post) => (
<div key={post.title}>
<p className="text-sm text-gray-500">
<time dateTime={post.datetime}>{post.date}</time>
</p>
<a href="#" className="mt-2 block">
<p className="text-xl font-semibold text-gray-900">
{post.title}
</p>
<p className="mt-3 text-base text-gray-500">
{post.description}
</p>
</a>
<div className="mt-3">
<a
href={post.href}
className="text-base font-semibold text-blue-600 hover:text-blue-500"
>
Read full story
</a>
</div>
</div>
))}
</div>
</div>
</div>
);
}
Three Column Cards
/* This example requires Tailwind CSS v2.0+ */
const posts = [
{
title: 'Boost your conversion rate',
href: '#',
category: { name: 'Article', href: '#' },
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
date: 'Mar 16, 2020',
datetime: '2020-03-16',
imageUrl:
'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
readingTime: '6 min',
author: {
name: 'Roel Aufderehar',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
{
title: 'How to use search engine optimization to drive sales',
href: '#',
category: { name: 'Video', href: '#' },
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.',
date: 'Mar 10, 2020',
datetime: '2020-03-10',
imageUrl:
'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
readingTime: '4 min',
author: {
name: 'Brenna Goyette',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
{
title: 'Improve your customer experience',
href: '#',
category: { name: 'Case Study', href: '#' },
description:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.',
date: 'Feb 12, 2020',
datetime: '2020-02-12',
imageUrl:
'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
readingTime: '11 min',
author: {
name: 'Daniela Metz',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
},
];
export default function Example() {
return (
<div className='relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8'>
<div className='absolute inset-0'>
<div className='bg-white h-1/3 sm:h-2/3' />
</div>
<div className='relative max-w-7xl mx-auto'>
<div className='text-center'>
<h2 className='text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl'>
From the blog
</h2>
<p className='mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus
atque, ducimus sed.
</p>
</div>
<div className='mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none'>
{posts.map((post) => (
<div key={post.title} className='flex flex-col rounded-lg shadow-lg overflow-hidden'>
<div className='flex-shrink-0'>
<img className='h-48 w-full object-cover' src={post.imageUrl} alt='' />
</div>
<div className='flex-1 bg-white p-6 flex flex-col justify-between'>
<div className='flex-1'>
<p className='text-sm font-medium text-blue-600'>
<a href={post.category.href} className='hover:underline'>
{post.category.name}
</a>
</p>
<a href={post.href} className='block mt-2'>
<p className='text-xl font-semibold text-gray-900'>{post.title}</p>
<p className='mt-3 text-base text-gray-500'>{post.description}</p>
</a>
</div>
<div className='mt-6 flex items-center'>
<div className='flex-shrink-0'>
<a href={post.author.href}>
<span className='sr-only'>{post.author.name}</span>
<img className='h-10 w-10 rounded-full' src={post.author.imageUrl} alt='' />
</a>
</div>
<div className='ml-3'>
<p className='text-sm font-medium text-gray-900'>
<a href={post.author.href} className='hover:underline'>
{post.author.name}
</a>
</p>
<div className='flex space-x-1 text-sm text-gray-500'>
<time dateTime={post.datetime}>{post.date}</time>
<span aria-hidden='true'>·</span>
<span>{post.readingTime} read</span>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
}
Three Column With Badges
/* This example requires Tailwind CSS v2.0+ */
const posts = [
{
title: 'Boost your conversion rate',
href: '#',
category: { name: 'Article', href: '#', color: 'bg-blue-100 text-blue-800' },
description:
'Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.',
date: 'Mar 16, 2020',
datetime: '2020-03-16',
author: {
name: 'Paul York',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
readingTime: '6 min',
},
{
title: 'How to use search engine optimization to drive sales',
href: '#',
category: { name: 'Video', href: '#', color: 'bg-pink-100 text-pink-800' },
description:
'Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet. Sapien tortor lacus arcu.',
date: 'Mar 10, 2020',
datetime: '2020-03-10',
author: {
name: 'Dessie Ryan',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
readingTime: '4 min',
},
{
title: 'Improve your customer experience',
href: '#',
category: { name: 'Case Study', href: '#', color: 'bg-green-100 text-green-800' },
description:
'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab iure iusto fugiat commodi sequi.',
date: 'Feb 12, 2020',
datetime: '2020-02-12',
author: {
name: 'Easer Collins',
href: '#',
imageUrl:
'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
},
readingTime: '11 min',
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(' ');
}
export default function Example() {
return (
<div className='bg-white pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8'>
<div className='relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl'>
<div>
<h2 className='text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl'>
Recent publications
</h2>
<p className='mt-3 text-xl text-gray-500 sm:mt-4'>
Nullam risus blandit ac aliquam justo ipsum. Quam mauris volutpat massa dictumst amet.
Sapien tortor lacus arcu.
</p>
</div>
<div className='mt-12 grid gap-16 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12'>
{posts.map((post) => (
<div key={post.title}>
<div>
<a href={post.category.href} className='inline-block'>
<span
className={classNames(
post.category.color,
'inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium'
)}
>
{post.category.name}
</span>
</a>
</div>
<a href={post.href} className='block mt-4'>
<p className='text-xl font-semibold text-gray-900'>{post.title}</p>
<p className='mt-3 text-base text-gray-500'>{post.description}</p>
</a>
<div className='mt-6 flex items-center'>
<div className='flex-shrink-0'>
<a href={post.author.href}>
<span className='sr-only'>{post.author.name}</span>
<img className='h-10 w-10 rounded-full' src={post.author.imageUrl} alt='' />
</a>
</div>
<div className='ml-3'>
<p className='text-sm font-medium text-gray-900'>
<a href={post.author.href}>{post.author.name}</a>
</p>
<div className='flex space-x-1 text-sm text-gray-500'>
<time dateTime={post.datetime}>{post.date}</time>
<span aria-hidden='true'>·</span>
<span>{post.readingTime} read</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
}