Active Bottom Tab Rounding.
I would like to round the corners in a way like this this code does for the middle tab, when that tab is active, however would I switch out the round at the bottom with code. I feel like I am overthinking how I should approach this.
'use client';
import React from 'react';
import Table from '../(components)/table';
import Link from 'next/link'
function RequestCreatePage() {
return (
<>
<div className="card grid bg-info my-3 shadow-xl">
<div className='card-header'>
<div className="tabs tab-secondary">
<div className='bg-secondary rounded-t-lg'>
<a className="tab tab-lg bg-primary tab-lifted text-white rounded-br-lg border-hidden ">Large</a>
</div>
<a className="tab tab-lg bg-secondary tab-lifted text-white border-none">Large</a>
<div className='bg-secondary rounded-t-lg'>
<a className="tab tab-lg bg-primary tab-lifted text-white rounded-bl-lg border-none">Large</a>
</div>
</div>
<div className="w-full h-4 bg-secondary">
</div>
</div>
</div>
</>
);
}
export default RequestCreatePage`'use client';
import React from 'react';
import Table from '../(components)/table';
import Link from 'next/link'
function RequestCreatePage() {
return (
<>
<div className="card grid bg-info my-3 shadow-xl">
<div className='card-header'>
<div className="tabs tab-secondary">
<div className='bg-secondary rounded-t-lg'>
<a className="tab tab-lg bg-primary tab-lifted text-white rounded-br-lg border-hidden ">Large</a>
</div>
<a className="tab tab-lg bg-secondary tab-lifted text-white border-none">Large</a>
<div className='bg-secondary rounded-t-lg'>
<a className="tab tab-lg bg-primary tab-lifted text-white rounded-bl-lg border-none">Large</a>
</div>
</div>
<div className="w-full h-4 bg-secondary">
</div>
</div>
</div>
</>
);
}
export default RequestCreatePage`
