<div id="features" class="py-8 bg-gray-900">
<div class="container mx-auto">
<div class="text-center">
<h2 class="text-3xl font-bold text-white">Features</h2>
<span class="block rounded w-12 my-3 mx-auto h-1
bg-gradient-to-r from-green-400 to-blue-300"></span>
<p class="px-4 text-center text-sm my-2 leading-6
text-gray-100">
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Ut mollitia, magnam dolor, minima
corrupti alias.
</p>
</div>
<div
class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-red-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-rocket text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Instant
Activation</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Ipsa
fugit
molestias
unde
et
maxime
earum
illo
iusto
necessitatibus
ut
error
quisquam
obcaecati.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-yellow-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-tools text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Easy
Integration</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Tempora
fugit
consectetur
excepturi
praesentium
placeat
incidunt
reprehenderit
deleniti,
quod
qui
quibusdam.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-green-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-code text-white"></i>
</span>
<h4 class="font-bold text-md text-white">API
Driven</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Nobis,
vitae
non
accusamus
deleniti
minima
exercitationem
excepturi
vel
blanditiis
voluptate
soluta
similique.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-pink-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-keyboard text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Custom
Components</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Cumque
dolores
provident
alias
nam
delectus
ipsa
deserunt
dignissimos
eius,
Culpa
soluta
accusamus
quia.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-indigo-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-sliders-h text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Flexible
Pricing</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit
ex,
obcaecati.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-purple-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-trophy text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Best
in
Industry
Support</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
A
fugit
error
animi
temporibus
quis
sunt
totam,
atque
dicta
assumenda.
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-red-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-file-alt text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Dashboard
Reporting</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Praesentium
iste
nisi
doloribus
qui
earum
aperiam
eius
odit
ullam
ut
non!
</p>
</div>
<div
class="text-center md:text-left w-full p-2
rounded">
<span class="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-green-300
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0">
<i class="fas fa-lock text-white"></i>
</span>
<h4 class="font-bold text-md text-white">Secure</h4>
<p class="text-sm my-2 leading-6 text-gray-400">
Alias
earum
provident
dolor
itaque
corrupti
consectetur
eius
obcaecati
non
</p>
</div>
</div>
</div>
</div>
const Features = () => {
return (
<div id="features" className="py-8 bg-gray-900">
<div className="container mx-auto">
<div className="text-center">
<h2 className="text-3xl font-bold text-white">Features</h2>
<span
className="block rounded w-12 my-3 mx-auto h-1
bg-gradient-to-r from-green-400 to-blue-300"
/>
<p
className="px-4 text-center text-sm my-2 leading-6
text-gray-100"
>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ut mollitia, magnam dolor, minima corrupti alias.
</p>
</div>
<div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-red-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-rocket text-white" />
</span>
<h4 className="font-bold text-md text-white">
Instant Activation
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Ipsa fugit molestias unde et maxime earum illo iusto
necessitatibus ut error quisquam obcaecati.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-yellow-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-tools text-white" />
</span>
<h4 className="font-bold text-md text-white">
Easy Integration
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Tempora fugit consectetur excepturi praesentium
placeat incidunt reprehenderit deleniti, quod qui
quibusdam.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-green-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-code text-white" />
</span>
<h4 className="font-bold text-md text-white">
API Driven
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Nobis, vitae non accusamus deleniti minima
exercitationem excepturi vel blanditiis voluptate
soluta similique.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-pink-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-keyboard text-white" />
</span>
<h4 className="font-bold text-md text-white">
Custom Components
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Cumque dolores provident alias nam delectus ipsa
deserunt dignissimos eius, Culpa soluta accusamus
quia.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-indigo-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-sliders-h text-white" />
</span>
<h4 className="font-bold text-md text-white">
Flexible Pricing
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing
elit ex, obcaecati.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-purple-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-trophy text-white" />
</span>
<h4 className="font-bold text-md text-white">
Best in Industry Support
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
A fugit error animi temporibus quis sunt totam,
atque dicta assumenda.
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-red-400
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-file-alt text-white" />
</span>
<h4 className="font-bold text-md text-white">
Dashboard Reporting
</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Praesentium iste nisi doloribus qui earum aperiam
eius odit ullam ut non!
</p>
</div>
<div
className="text-center md:text-left w-full p-2
rounded"
>
<span
className="w-10 h-10 my-2 rounded-full
bg-gradient-to-tr
from-blue-500 to-green-300
text-center
shadow-xl
flex justify-center content-center
items-center mx-auto md:mx-0"
>
<i className="fas fa-lock text-white" />
</span>
<h4 className="font-bold text-md text-white">Secure</h4>
<p className="text-sm my-2 leading-6 text-gray-400">
Alias earum provident dolor itaque corrupti
consectetur eius obcaecati non
</p>
</div>
</div>
</div>
</div>
);
}
export default Features;