| Tabs Name | Tabs Output | HTML | JSX | ||
|---|---|---|---|---|---|
| Default tab with all radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
onChange={() => setDefaultTabAllRadius( ()=>{ TabNames.find((tab) => tab.current)
.id})}
defaultValue={
TabNames.find((tab) => tab.current)
.name
}
>
{TabNames.map((tab,index) => (
<option key={tab.name} >{tab.name}</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex space-x-4" aria-label="Tabs">
{TabNames.map((tab,index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setDefaultTabAllRadius(index)}
className={classNames(
index === defaultTabAllRadius
? "bg-atom_rojored text-atom_white font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack border border-atom_silver hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
"rounded-md p-2.5 text-sm cursor-pointer "
)}
aria-current={ index === defaultTabAllRadius ? "page" : undefined}
>
<i className={classNames(
index === defaultTabAllRadius
? "text-white border-0 "
: "text-gray-500 hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
{defaultTabAllRadius == 0 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 1</p>
</div>
</>)}
{defaultTabAllRadius == 1 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 2</p>
</div>
</>)}
{defaultTabAllRadius == 2 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 3</p>
</div>
</>)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [defaultTabAllRadius, setDefaultTabAllRadius] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} | ||
| Default tab with top radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current)
.name
}
>
{TabNames.map((tab,index) => (
<option key={tab.name} onClick={() => setDefaultTabTopRadius(index)}>{tab.name}</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex space-x-4" aria-label="Tabs">
{TabNames.map((tab,index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setDefaultTabTopRadius(index)}
className={classNames(
index === defaultTabTopRadius
? "bg-atom_rojored text-atom_white font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack border border-atom_silver hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
"rounded-t-md p-2.5 text-sm cursor-pointer "
)}
aria-current={ index === defaultTabTopRadius ? "page" : undefined}
>
<i className={classNames(
index === defaultTabTopRadius
? "text-white border-0 "
: "text-gray-500 hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
{defaultTabTopRadius == 0 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 1</p>
</div>
</>)}
{defaultTabTopRadius == 1 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 2</p>
</div>
</>)}
{defaultTabTopRadius == 2 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 3</p>
</div>
</>)}
| defaultTabTopRadiusJSX | ||
| Default tab with no radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current)
.name
}
>
{TabNames.map((tab,index) => (
<option key={tab.name} onClick={() => setDefaultTabNoRadius(index)}>{tab.name}</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex space-x-4" aria-label="Tabs">
{TabNames.map((tab,index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setDefaultTabNoRadius(index)}
className={classNames(
index === defaultTabNoRadius
? "bg-atom_rojored text-atom_white font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack border border-atom_silver hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
" p-2.5 text-sm cursor-pointer "
)}
aria-current={ index === defaultTabNoRadius ? "page" : undefined}
>
<i className={classNames(
index === defaultTabNoRadius
? "text-white border-0 "
: "text-gray-500 hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
{defaultTabNoRadius == 0 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 1</p>
</div>
</>)}
{defaultTabNoRadius == 1 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 2</p>
</div>
</>)}
{defaultTabNoRadius == 2 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 3</p>
</div>
</>)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [defaultTabNoRadius, setDefaultTabNoRadius] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} | ||
| Default tab with Left and Right radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current)
.name
}
>
{TabNames.map((tab,index) => (
<option key={tab.name} onClick={() => setdefaultTabLeftRightRadius(index)}>{tab.name}</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex " aria-label="Tabs">
{TabNames.map((tab,index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setdefaultTabLeftRightRadius(index)}
style={{'borderRadius': index == '0' ? '6px 0px 0px 6px' : index == '1' ? '0' : '0px 6px 6px 0px','borderLeftWidth': index == '1' ? '0px' : '',
'borderRightWidth': index == '1' ? '0px' : ''
}}
className={classNames(
index === defaultTabLeftRightRadius
? "bg-atom_rojored text-atom_white border-atom_rojored font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
"rounded-md p-2.5 text-sm cursor-pointer border border-atom_silver"
)}
aria-current={ index === defaultTabLeftRightRadius ? "page" : undefined}
>
<i className={classNames(
index === defaultTabLeftRightRadius
? "text-white border-0 "
: "text-gray-500 hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
{defaultTabLeftRightRadius == 0 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 1</p>
</div>
</>)}
{defaultTabLeftRightRadius == 1 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 2</p>
</div>
</>)}
{defaultTabLeftRightRadius == 2 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 3</p>
</div>
</>)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [defaultTabLeftRightRadius, setdefaultTabLeftRightRadius] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} | ||
| Default tab with rounded radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current)
.name
}
>
{TabNames.map((tab,index) => (
<option key={tab.name} onClick={() => setDefaultTabRoundedRadius(index)}>{tab.name}</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex space-x-4" aria-label="Tabs">
{TabNames.map((tab,index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setDefaultTabRoundedRadius(index)}
className={classNames(
index === defaultTabRoundedRadius
? "bg-atom_rojored text-atom_white font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack border border-atom_silver hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
"rounded-full p-2.5 text-sm cursor-pointer "
)}
aria-current={ index === defaultTabRoundedRadius ? "page" : undefined}
>
<i className={classNames(
index === defaultTabRoundedRadius
? "text-white border-0 "
: "text-gray-500 hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
{defaultTabRoundedRadius == 0 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 1</p>
</div>
</>)}
{defaultTabRoundedRadius == 1 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 2</p>
</div>
</>)}
{defaultTabRoundedRadius == 2 && ( <>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">Content Tab 3</p>
</div>
</>)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [defaultTabRoundedRadius, setDefaultTabRoundedRadius] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} | ||
| Underline tab with background | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current).name
}
>
{TabNames.map((tab, index) => (
<option
key={tab.name}
onClick={() =>
setUnderLineTabBackground(index)
}
>
{tab.name}
</option>
))}
</select>
</div>
<div className="block sm:hidden">
<div className="border-b border-gray-200">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
{TabNames.map((tab, index) => (
<a
key={tab.name}
href={tab.href}
onClick={() =>
setUnderLineTabBackground(index)
}
className={classNames(
index === UnderLineTabBackground
? "border-atom_rojored text-atom_rojored"
: "border-transparent text-atom_onxyblack hover:border-gray-300 hover:text-gray-700",
"whitespace-nowrap border-b-2 p-4 text-sm font-medium cursor-pointer"
)}
aria-current={
index === UnderLineTabBackground
? "page"
: undefined
}
>
<i
className={classNames(
index === UnderLineTabBackground
? "text-atom_rojored border-0 "
: "text-atom_onxyblack hover:text-gray-700",
"text-atom_onxyblack ri-user-fill mr-2.5"
)}
></i>
{tab.name}
</a>
))}
</nav>
</div>
</div>
{UnderLineTabBackground == 0 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 1
</p>
</div>
</>
)}
{UnderLineTabBackground == 1 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 2
</p>
</div>
</>
)}
{UnderLineTabBackground == 2 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 3
</p>
</div>
</>
)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [UnderLineTabBackground, setUnderLineTabBackground] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} | ||
| Dual line tab with top radius | Content Tab 1 |
<div className="hidden sm:block">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={
TabNames.find((tab) => tab.current).name
}
>
{TabNames.map((tab, index) => (
<option
key={tab.name}
onClick={() => setDefaultTabTopRadius(index)}
>
{tab.name}
</option>
))}
</select>
</div>
<div className="block sm:hidden">
<nav className="flex space-x-4" aria-label="Tabs">
{TabNames.map((tab, index) => (
<a
key={tab.name}
href={tab.href}
onClick={() => setDualLineTabTopRadius(index)}
className={classNames(
index === DualLineTabTopRadius
? "bg-atom_rojored text-atom_white font-medium [box-shadow:0px_3px_6px_0px_#00000000]"
: "text-atom_onxyblack border border-atom_silver hover:text-gray-700 font-meduim [box-shadow:0px_3px_6px_0px_#00000025]",
"rounded-t-md p-2.5 text-sm text-center cursor-pointer "
)}
aria-current={
index === DualLineTabTopRadius
? "page"
: undefined
}
>
{tab.name}
<span
className={classNames(
index === DualLineTabTopRadius
? "bg-white border-0 "
: "text-atom_onxyblack bg-gray-100",
"inline-flex items-center rounded-full ml-2 px-2 py-1 text-xs font-medium text-gray-600"
)}
>0000 </span>
<span className="block font-medium mt-1 text-xs">Caption Line</span>
</a>
))}
</nav>
</div>
{DualLineTabTopRadius == 0 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 1
</p>
</div>
</>
)}
{DualLineTabTopRadius == 1 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 2
</p>
</div>
</>
)}
{DualLineTabTopRadius == 2 && (
<>
<div className="border atom_platinumgrey rounded-md w-full min-w-[100px] p-5 mt-3">
<p className="text-sm font-medium text-atom_onxyblack">
Content Tab 3
</p>
</div>
</>
)}
| // import this before component function start remove it if already imported
import{ useState } from "react";
// import this after component function start
const [DualLineTabTopRadius, setDualLineTabTopRadius] = useState(0);
const TabNames = [
{
id:"0",
name: "Tab Name",
current: true,
},
{
id:"1",
name: "Tab Name",
current: false,
},
{
id:"2",
name: "Tab Name",
current: false,
},
];
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
} |
| Accordions Name | Accordions Output | HTML | JSX | ||
|---|---|---|---|---|---|
| Accordion with Separate header | What are the types of SME loans for supply chain finance? Content for Item 1 What are the types of SME loans for supply chain finance? Content for Item 2 What are the types of SME loans for supply chain finance? Content for Item 3 |
<div className=" mx-auto">
{Accordionitems.map((item, index) => (
<div key={index} className="[box-shadow:0px_3px_6px_0px_#0000000D]
border border-atom_silver rounded-md mb-4 overflow-hidden "
>
<div className="bg-atom_ghostwhite flex text-atom_onxyblack
text-sm font-medium justify-between items-center p-4 cursor-pointer"
onClick={() => toggleAccordion(index)}>
<div>{item.title}</div>
<i className={classNames(activeIndex === index ? "ri-subtract-fill" : "ri-add-fill",
"ri-add-fill text-atom_onxyblack text-xl")}></i>
</div>
<div className={classNames( activeIndex === index ? "max-h-screen" : "max-h-0",
"transition-max-height ease-in-out duration-100")}
>
<div className="p-4 bg-white">
<p className="text-xs text-atom_onxyblack"> {item.content}</p>
</div>
</div>
</div>
))}
</div>
|
// add outside function component
import React, { useState } from 'react';
// add inside the function component
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const Accordionitems = [
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 1",
},
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 2",
},
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 3",
},
];
const [activeIndex, setActiveIndex] = useState(null);
const toggleAccordion = (index) => {
setActiveIndex(activeIndex === index ? null : index);
};
| ||
| Accordion with Merged header | What are the types of SME loans for supply chain finance? Content for Item 1 What are the types of SME loans for supply chain finance? Content for Item 2 What are the types of SME loans for supply chain finance? Content for Item 3 |
<div className=" mx-auto">
{Accordionitems.map((item, index) => (
<div key={index} className="[box-shadow:0px_3px_6px_0px_#0000000D]
border border-atom_silver rounded-md mb-4 overflow-hidden ">
<div className=" flex text-atom_onxyblack text-sm font-medium
justify-between items-center p-4 cursor-pointer" onClick={() => toggleAccordion2(index)}>
<div>{item.title}</div>
<i
className={classNames(
activeIndex2 === index ? "ri-subtract-fill" : "ri-add-fill",
"ri-add-fill text-atom_onxyblack text-xl"
)}
></i>
</div>
<div
className={classNames(
activeIndex2 === index ? "max-h-screen" : "max-h-0",
"transition-max-height ease-in-out duration-100"
)}
>
<div className="p-4 bg-white pt-1">
<p className="text-xs text-atom_onxyblack"> {item.content}</p>
</div>
</div>
</div>
))}
</div>;
|
// add outside function component
import React, { useState } from 'react';
// add inside the function component
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
const Accordionitems = [
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 1",
},
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 2",
},
{
title: "What are the types of SME loans for supply chain finance?",
content: "Content for Item 3",
},
];
const [activeIndex2, setActiveIndex2] = useState(null);
const toggleAccordion2 = (index) => {
setActiveIndex2(activeIndex2 === index ? null : index);
};
|