Creating Tabs In VF Pages

VFP Page

<apex:page id="page" controller="TEZ_AC_pageblocktablecolumn" >
    <style>
        .activeTab 
        {
        background-color: #236FBD; color:white; 
        background-image:none
        }
        
        .inactiveTab 
        { 
        background-color: lightgrey; color:black; 
        background-image:none
        }
    </style>
    
    
    <apex:form id="frm" >
        <apex:tabPanel id="tabpanel1" switchType="client" selectedTab="name1" activeTabClass="activeTab" inactiveTabClass="inactiveTab" >
            <!-- Tab 1-->
            <apex:tab label="One" name="name1" id="tabOne">
                <apex:pageBlock id="pageblock" >
                    <apex:pageBlockTable id="pgtable" value="{!con}" var="cc" >
                        <apex:column value="{!cc.name}" />
                    </apex:pageBlockTable>
                </apex:pageBlock>
            </apex:tab>
            <!-- Tab 2-->
            <apex:tab label="Two" name="name2" id="tabTwo">
                <apex:pageBlock id="pageblock2" >
                    <apex:pageBlockTable id="pgtable" value="{!con}" var="cc" >
                        <apex:column value="{!cc.id}" />
                    </apex:pageBlockTable>
                </apex:pageBlock>
            </apex:tab>
            <!-- Tab 3-->
            <apex:tab label="Three" name="name3" id="tabThree">
                <apex:pageBlock id="pageblock3" >
                    <apex:pageBlockTable id="pgtable" value="{!con}" var="cc" >
                        <apex:column value="{!cc.name}" />
                    </apex:pageBlockTable>
                </apex:pageBlock>
            </apex:tab>
        </apex:tabPanel>
    </Apex:form>
</apex:page>

Class

public class TEZ_AC_pageblocktablecolumn{
    public list<contact> con{get;set;}
    public TEZ_AC_pageblocktablecolumn (){
        con=[select id, name from contact limit 1000];
    }
}