src/components/SectionTitle.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import React from "react";
import Container from "./Container";

const SectionTitle = (props) => {
    return (
        <Container
            className={`flex w-full flex-col ${
                props.align === "left" ? "" : "items-center justify-center text-center"
            }`}>
            {props.pretitle && (
                <div className="text-sm font-bold tracking-wider text-indigo-600 uppercase">
                    {props.pretitle}
                </div>
            )}

            {props.title && (
                <h2 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">
                    {props.title}
                </h2>
            )}

            {props.children && (
                <p className="max-w-2xl py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
                    {props.children}
                </p>
            )}
        </Container>
    );
}

export default SectionTitle;