# TabContent

## Description

A content container component for tab panels that displays specific content associated with tab items. TabContent works in conjunction with the Tabs system to show and hide content based on the selected tab. It provides a structured way to organize and present different sections of information within a tabbed interface.

## Aliases

- TabContent
- Tab Panel
- Tab Container
- Content Panel
- Tab Section

## Props Breakdown

**Standalone Interface**

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `value` | `number \| string` | - | Yes | The tab contents value used to determine which tab is selected |
| `children` | `ReactNode` | - | Yes | The contents of the tab |
| `className` | `string` | - | No | Additional CSS class names for styling |

## Examples

### Basic Tab Content

```tsx
import { Tabs, TabItem, TabContent } from '@delightui/components';

function BasicTabContentExample() {
  return (
    <Tabs>
      <div>
        <TabItem value="home" defaultTab>Home</TabItem>
        <TabItem value="about">About</TabItem>
        <TabItem value="contact">Contact</TabItem>
      </div>
      
      <TabContent value="home">
        <div style={{ padding: '20px' }}>
          <h2>Welcome Home</h2>
          <p>This is the home tab content. Here you can find general information about our services and latest updates.</p>
          <ul>
            <li>Latest news and announcements</li>
            <li>Featured products</li>
            <li>Quick access to popular sections</li>
          </ul>
        </div>
      </TabContent>
      
      <TabContent value="about">
        <div style={{ padding: '20px' }}>
          <h2>About Us</h2>
          <p>Learn more about our company, mission, and values.</p>
          <p>We are dedicated to providing excellent service and innovative solutions to our customers.</p>
        </div>
      </TabContent>
      
      <TabContent value="contact">
        <div style={{ padding: '20px' }}>
          <h2>Contact Information</h2>
          <p>Get in touch with us through the following channels:</p>
          <ul>
            <li>Email: contact@example.com</li>
            <li>Phone: +1-555-0123</li>
            <li>Address: 123 Main St, City, State 12345</li>
          </ul>
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Tab Content with Forms

```tsx
import { Tabs, TabItem, TabContent, Input, TextArea, Button, FormField } from '@delightui/components';

function FormTabContentExample() {
  const [personalInfo, setPersonalInfo] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: ''
  });
  
  const [preferences, setPreferences] = useState({
    notifications: true,
    newsletter: false,
    theme: 'light'
  });

  return (
    <Tabs style="Underlined">
      <div style={{ borderBottom: '1px solid #e0e0e0' }}>
        <TabItem value="personal" defaultTab>Personal Info</TabItem>
        <TabItem value="preferences">Preferences</TabItem>
        <TabItem value="security">Security</TabItem>
      </div>
      
      <TabContent value="personal">
        <div style={{ padding: '24px', maxWidth: '500px' }}>
          <h3 style={{ marginBottom: '20px' }}>Personal Information</h3>
          <div style={{ display: 'grid', gap: '16px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
              <FormField label="First Name" required>
                <Input
                  value={personalInfo.firstName}
                  onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, firstName: value }))}
                  placeholder="Enter first name"
                />
              </FormField>
              <FormField label="Last Name" required>
                <Input
                  value={personalInfo.lastName}
                  onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, lastName: value }))}
                  placeholder="Enter last name"
                />
              </FormField>
            </div>
            <FormField label="Email Address" required>
              <Input
                inputType="Email"
                value={personalInfo.email}
                onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, email: value }))}
                placeholder="Enter email address"
              />
            </FormField>
            <FormField label="Phone Number">
              <Input
                inputType="Tel"
                value={personalInfo.phone}
                onValueChange={(value) => setPersonalInfo(prev => ({ ...prev, phone: value }))}
                placeholder="Enter phone number"
              />
            </FormField>
            <Button style="Primary">Save Personal Info</Button>
          </div>
        </div>
      </TabContent>
      
      <TabContent value="preferences">
        <div style={{ padding: '24px', maxWidth: '500px' }}>
          <h3 style={{ marginBottom: '20px' }}>Preferences</h3>
          <div style={{ display: 'grid', gap: '20px' }}>
            <FormField label="Notification Settings">
              <div style={{ display: 'grid', gap: '12px' }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <input 
                    type="checkbox" 
                    checked={preferences.notifications}
                    onChange={(e) => setPreferences(prev => ({ ...prev, notifications: e.target.checked }))}
                  />
                  Enable push notifications
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                  <input 
                    type="checkbox" 
                    checked={preferences.newsletter}
                    onChange={(e) => setPreferences(prev => ({ ...prev, newsletter: e.target.checked }))}
                  />
                  Subscribe to newsletter
                </label>
              </div>
            </FormField>
            <FormField label="Theme Preference">
              <select 
                value={preferences.theme}
                onChange={(e) => setPreferences(prev => ({ ...prev, theme: e.target.value }))}
                style={{ padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
              >
                <option value="light">Light</option>
                <option value="dark">Dark</option>
                <option value="auto">Auto</option>
              </select>
            </FormField>
            <Button style="Primary">Save Preferences</Button>
          </div>
        </div>
      </TabContent>
      
      <TabContent value="security">
        <div style={{ padding: '24px', maxWidth: '500px' }}>
          <h3 style={{ marginBottom: '20px' }}>Security Settings</h3>
          <div style={{ display: 'grid', gap: '16px' }}>
            <FormField label="Current Password" required>
              <Input
                inputType="Password"
                placeholder="Enter current password"
              />
            </FormField>
            <FormField label="New Password" required>
              <Input
                inputType="Password"
                placeholder="Enter new password"
              />
            </FormField>
            <FormField label="Confirm New Password" required>
              <Input
                inputType="Password"
                placeholder="Confirm new password"
              />
            </FormField>
            <Button style="Primary">Update Password</Button>
          </div>
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Tab Content with Data Tables

```tsx
import { Tabs, TabItem, TabContent, Table, TableBody, TableHeader, TableRow, TableHeaderCell, TableCell, Button, Chip } from '@delightui/components';

function DataTableTabContentExample() {
  const activeUsers = [
    { name: 'John Doe', email: 'john@example.com', lastActive: '2 hours ago', status: 'Online' },
    { name: 'Jane Smith', email: 'jane@example.com', lastActive: '30 minutes ago', status: 'Online' },
    { name: 'Bob Wilson', email: 'bob@example.com', lastActive: '1 hour ago', status: 'Away' }
  ];

  const inactiveUsers = [
    { name: 'Alice Brown', email: 'alice@example.com', lastActive: '2 days ago', status: 'Offline' },
    { name: 'Charlie Davis', email: 'charlie@example.com', lastActive: '1 week ago', status: 'Offline' }
  ];

  const pendingUsers = [
    { name: 'Diana Evans', email: 'diana@example.com', invited: '1 day ago', status: 'Pending' },
    { name: 'Frank Miller', email: 'frank@example.com', invited: '3 days ago', status: 'Pending' }
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Online': return 'success';
      case 'Away': return 'warning';
      case 'Offline': return 'neutral';
      case 'Pending': return 'primary';
      default: return 'neutral';
    }
  };

  return (
    <Tabs>
      <div style={{ borderBottom: '1px solid #e0e0e0', padding: '0 20px' }}>
        <TabItem value="active" defaultTab>
          Active Users ({activeUsers.length})
        </TabItem>
        <TabItem value="inactive">
          Inactive Users ({inactiveUsers.length})
        </TabItem>
        <TabItem value="pending">
          Pending Users ({pendingUsers.length})
        </TabItem>
      </div>
      
      <TabContent value="active">
        <div style={{ padding: '20px' }}>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell>Email</TableHeaderCell>
                <TableHeaderCell>Last Active</TableHeaderCell>
                <TableHeaderCell>Status</TableHeaderCell>
                <TableHeaderCell>Actions</TableHeaderCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {activeUsers.map((user, index) => (
                <TableRow key={index}>
                  <TableCell>{user.name}</TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.lastActive}</TableCell>
                  <TableCell>
                    <Chip color={getStatusColor(user.status)}>
                      {user.status}
                    </Chip>
                  </TableCell>
                  <TableCell>
                    <Button size="Small" type="Outlined">Message</Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </TabContent>
      
      <TabContent value="inactive">
        <div style={{ padding: '20px' }}>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell>Email</TableHeaderCell>
                <TableHeaderCell>Last Active</TableHeaderCell>
                <TableHeaderCell>Status</TableHeaderCell>
                <TableHeaderCell>Actions</TableHeaderCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {inactiveUsers.map((user, index) => (
                <TableRow key={index}>
                  <TableCell>{user.name}</TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.lastActive}</TableCell>
                  <TableCell>
                    <Chip color={getStatusColor(user.status)}>
                      {user.status}
                    </Chip>
                  </TableCell>
                  <TableCell>
                    <Button size="Small" type="Outlined">Reactivate</Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </TabContent>
      
      <TabContent value="pending">
        <div style={{ padding: '20px' }}>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderCell>Name</TableHeaderCell>
                <TableHeaderCell>Email</TableHeaderCell>
                <TableHeaderCell>Invited</TableHeaderCell>
                <TableHeaderCell>Status</TableHeaderCell>
                <TableHeaderCell>Actions</TableHeaderCell>
              </TableRow>
            </TableHeader>
            <TableBody>
              {pendingUsers.map((user, index) => (
                <TableRow key={index}>
                  <TableCell>{user.name}</TableCell>
                  <TableCell>{user.email}</TableCell>
                  <TableCell>{user.invited}</TableCell>
                  <TableCell>
                    <Chip color={getStatusColor(user.status)}>
                      {user.status}
                    </Chip>
                  </TableCell>
                  <TableCell>
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <Button size="Small" style="Primary">Resend</Button>
                      <Button size="Small" style="Destructive">Cancel</Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Tab Content with Loading States

```tsx
import { Tabs, TabItem, TabContent, Spinner, Button, Text } from '@delightui/components';

function LoadingTabContentExample() {
  const [loadingStates, setLoadingStates] = useState({
    dashboard: false,
    analytics: false,
    reports: false
  });
  
  const [data, setData] = useState({
    dashboard: null,
    analytics: null,
    reports: null
  });

  const loadData = async (tab: string) => {
    setLoadingStates(prev => ({ ...prev, [tab]: true }));
    
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    setData(prev => ({ ...prev, [tab]: `Loaded data for ${tab}` }));
    setLoadingStates(prev => ({ ...prev, [tab]: false }));
  };

  return (
    <Tabs>
      <div>
        <TabItem value="dashboard" defaultTab>Dashboard</TabItem>
        <TabItem value="analytics">Analytics</TabItem>
        <TabItem value="reports">Reports</TabItem>
      </div>
      
      <TabContent value="dashboard">
        <div style={{ padding: '40px', textAlign: 'center' }}>
          {loadingStates.dashboard ? (
            <div>
              <Spinner />
              <Text style={{ marginTop: '16px' }}>Loading dashboard data...</Text>
            </div>
          ) : (
            <div>
              <h3>Dashboard</h3>
              {data.dashboard ? (
                <div>
                  <Text>{data.dashboard}</Text>
                  <div style={{ marginTop: '20px' }}>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
                        <Text size="Large" weight="Bold">1,234</Text>
                        <Text color="secondary">Total Users</Text>
                      </div>
                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
                        <Text size="Large" weight="Bold">567</Text>
                        <Text color="secondary">Active Sessions</Text>
                      </div>
                      <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
                        <Text size="Large" weight="Bold">89%</Text>
                        <Text color="secondary">Uptime</Text>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div>
                  <Text>No data loaded yet.</Text>
                  <Button 
                    style="Primary" 
                    onClick={() => loadData('dashboard')}
                    style={{ marginTop: '16px' }}
                  >
                    Load Dashboard Data
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
      </TabContent>
      
      <TabContent value="analytics">
        <div style={{ padding: '40px', textAlign: 'center' }}>
          {loadingStates.analytics ? (
            <div>
              <Spinner />
              <Text style={{ marginTop: '16px' }}>Analyzing data...</Text>
            </div>
          ) : (
            <div>
              <h3>Analytics</h3>
              {data.analytics ? (
                <div>
                  <Text>{data.analytics}</Text>
                  <div style={{ marginTop: '20px' }}>
                    <div style={{ height: '200px', border: '1px solid #e0e0e0', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Text color="secondary">[Chart Placeholder]</Text>
                    </div>
                  </div>
                </div>
              ) : (
                <div>
                  <Text>Analytics data not loaded.</Text>
                  <Button 
                    style="Primary" 
                    onClick={() => loadData('analytics')}
                    style={{ marginTop: '16px' }}
                  >
                    Load Analytics
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
      </TabContent>
      
      <TabContent value="reports">
        <div style={{ padding: '40px', textAlign: 'center' }}>
          {loadingStates.reports ? (
            <div>
              <Spinner />
              <Text style={{ marginTop: '16px' }}>Generating reports...</Text>
            </div>
          ) : (
            <div>
              <h3>Reports</h3>
              {data.reports ? (
                <div>
                  <Text>{data.reports}</Text>
                  <div style={{ marginTop: '20px' }}>
                    <div style={{ display: 'grid', gap: '12px' }}>
                      <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', textAlign: 'left' }}>
                        <Text weight="Bold">Monthly Sales Report</Text>
                        <Text size="Small" color="secondary">Generated on {new Date().toLocaleDateString()}</Text>
                      </div>
                      <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px', textAlign: 'left' }}>
                        <Text weight="Bold">User Activity Report</Text>
                        <Text size="Small" color="secondary">Generated on {new Date().toLocaleDateString()}</Text>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div>
                  <Text>No reports generated yet.</Text>
                  <Button 
                    style="Primary" 
                    onClick={() => loadData('reports')}
                    style={{ marginTop: '16px' }}
                  >
                    Generate Reports
                  </Button>
                </div>
              )}
            </div>
          )}
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Tab Content with Rich Media

```tsx
import { Tabs, TabItem, TabContent, Image, Button, Text } from '@delightui/components';

function RichMediaTabContentExample() {
  const [selectedImage, setSelectedImage] = useState(0);
  
  const galleryImages = [
    { src: '/images/gallery-1.jpg', title: 'Mountain Landscape', description: 'Beautiful mountain scenery at sunset' },
    { src: '/images/gallery-2.jpg', title: 'Ocean View', description: 'Peaceful ocean waves on a sunny day' },
    { src: '/images/gallery-3.jpg', title: 'Forest Trail', description: 'Winding path through green forest' }
  ];

  const videos = [
    { id: 'video-1', title: 'Product Demo', duration: '3:45', thumbnail: '/images/video-thumb-1.jpg' },
    { id: 'video-2', title: 'Tutorial Basics', duration: '8:20', thumbnail: '/images/video-thumb-2.jpg' },
    { id: 'video-3', title: 'Advanced Features', duration: '12:15', thumbnail: '/images/video-thumb-3.jpg' }
  ];

  return (
    <Tabs type="Vertical" style={{ height: '500px' }}>
      <div style={{ width: '200px', borderRight: '1px solid #e0e0e0' }}>
        <TabItem value="overview" defaultTab>Overview</TabItem>
        <TabItem value="gallery">Gallery</TabItem>
        <TabItem value="videos">Videos</TabItem>
        <TabItem value="downloads">Downloads</TabItem>
      </div>
      
      <TabContent value="overview">
        <div style={{ padding: '24px', flex: 1 }}>
          <h2>Project Overview</h2>
          <div style={{ display: 'grid', gap: '20px' }}>
            <div>
              <Text size="Large">
                Welcome to our multimedia showcase. Here you can explore various types of content 
                including images, videos, and downloadable resources.
              </Text>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
                <h4>Image Gallery</h4>
                <Text>Explore our collection of high-quality images and visual content.</Text>
              </div>
              <div style={{ padding: '20px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
                <h4>Video Library</h4>
                <Text>Watch tutorials, demos, and educational content.</Text>
              </div>
            </div>
          </div>
        </div>
      </TabContent>
      
      <TabContent value="gallery">
        <div style={{ padding: '24px', flex: 1 }}>
          <h2>Image Gallery</h2>
          <div style={{ display: 'grid', gap: '20px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '300px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
              <Image
                src={galleryImages[selectedImage].src}
                alt={galleryImages[selectedImage].title}
                fit="Cover"
                style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px' }}
              />
            </div>
            <div>
              <h4>{galleryImages[selectedImage].title}</h4>
              <Text color="secondary">{galleryImages[selectedImage].description}</Text>
            </div>
            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
              {galleryImages.map((image, index) => (
                <button
                  key={index}
                  onClick={() => setSelectedImage(index)}
                  style={{
                    padding: '4px',
                    border: selectedImage === index ? '2px solid #2196f3' : '2px solid transparent',
                    borderRadius: '4px',
                    background: 'none',
                    cursor: 'pointer'
                  }}
                >
                  <Image
                    src={image.src}
                    alt={image.title}
                    width={60}
                    height={40}
                    fit="Cover"
                  />
                </button>
              ))}
            </div>
          </div>
        </div>
      </TabContent>
      
      <TabContent value="videos">
        <div style={{ padding: '24px', flex: 1 }}>
          <h2>Video Library</h2>
          <div style={{ display: 'grid', gap: '16px' }}>
            {videos.map(video => (
              <div key={video.id} style={{ 
                display: 'flex', 
                gap: '16px', 
                padding: '16px', 
                border: '1px solid #e0e0e0', 
                borderRadius: '8px' 
              }}>
                <Image
                  src={video.thumbnail}
                  alt={video.title}
                  width={120}
                  height={80}
                  fit="Cover"
                  style={{ borderRadius: '4px' }}
                />
                <div style={{ flex: 1 }}>
                  <h4>{video.title}</h4>
                  <Text color="secondary">Duration: {video.duration}</Text>
                  <Button size="Small" style="Primary" style={{ marginTop: '8px' }}>
                    Play Video
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </TabContent>
      
      <TabContent value="downloads">
        <div style={{ padding: '24px', flex: 1 }}>
          <h2>Downloads</h2>
          <div style={{ display: 'grid', gap: '16px' }}>
            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <Text weight="Bold">User Manual (PDF)</Text>
                  <Text size="Small" color="secondary">Complete guide - 2.5 MB</Text>
                </div>
                <Button size="Small" type="Outlined">Download</Button>
              </div>
            </div>
            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <Text weight="Bold">Sample Data (CSV)</Text>
                  <Text size="Small" color="secondary">Example dataset - 1.2 MB</Text>
                </div>
                <Button size="Small" type="Outlined">Download</Button>
              </div>
            </div>
            <div style={{ padding: '16px', border: '1px solid #e0e0e0', borderRadius: '8px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <Text weight="Bold">Template Pack (ZIP)</Text>
                  <Text size="Small" color="secondary">Design templates - 5.8 MB</Text>
                </div>
                <Button size="Small" type="Outlined">Download</Button>
              </div>
            </div>
          </div>
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Tab Content with Custom Styling

```tsx
import { Tabs, TabItem, TabContent, Text, Button } from '@delightui/components';

function CustomStyledTabContentExample() {
  return (
    <Tabs style="Filled">
      <div style={{ 
        backgroundColor: '#1976d2', 
        padding: '0 20px',
        borderRadius: '8px 8px 0 0'
      }}>
        <TabItem value="theme1" defaultTab style={{ color: 'white' }}>
          Ocean Theme
        </TabItem>
        <TabItem value="theme2" style={{ color: 'white' }}>
          Forest Theme
        </TabItem>
        <TabItem value="theme3" style={{ color: 'white' }}>
          Sunset Theme
        </TabItem>
      </div>
      
      <TabContent 
        value="theme1"
        className="ocean-theme"
        style={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          color: 'white',
          minHeight: '300px'
        }}
      >
        <div style={{ padding: '40px' }}>
          <h2 style={{ color: 'white', marginBottom: '20px' }}>Ocean Theme</h2>
          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
            Dive into the depths of tranquility with our ocean-inspired theme. 
            Feel the calm waves and peaceful blue tones wash over your interface.
          </Text>
          <div style={{ marginTop: '24px' }}>
            <Button 
              style="Secondary" 
              style={{ 
                backgroundColor: 'rgba(255,255,255,0.2)', 
                border: '1px solid rgba(255,255,255,0.3)',
                color: 'white'
              }}
            >
              Explore Ocean
            </Button>
          </div>
        </div>
      </TabContent>
      
      <TabContent 
        value="theme2"
        className="forest-theme"
        style={{
          background: 'linear-gradient(135deg, #4b6cb7 0%, #182848 100%)',
          color: 'white',
          minHeight: '300px'
        }}
      >
        <div style={{ padding: '40px' }}>
          <h2 style={{ color: 'white', marginBottom: '20px' }}>Forest Theme</h2>
          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
            Embrace the serenity of nature with our forest theme. 
            Experience the deep greens and earthy tones that bring peace and grounding.
          </Text>
          <div style={{ marginTop: '24px' }}>
            <Button 
              style="Secondary"
              style={{ 
                backgroundColor: 'rgba(255,255,255,0.2)', 
                border: '1px solid rgba(255,255,255,0.3)',
                color: 'white'
              }}
            >
              Explore Forest
            </Button>
          </div>
        </div>
      </TabContent>
      
      <TabContent 
        value="theme3"
        className="sunset-theme"
        style={{
          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          color: 'white',
          minHeight: '300px'
        }}
      >
        <div style={{ padding: '40px' }}>
          <h2 style={{ color: 'white', marginBottom: '20px' }}>Sunset Theme</h2>
          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: '16px', lineHeight: '1.6' }}>
            Bask in the warm glow of our sunset theme. 
            Feel the energy and warmth of vibrant oranges and passionate pinks.
          </Text>
          <div style={{ marginTop: '24px' }}>
            <Button 
              style="Secondary"
              style={{ 
                backgroundColor: 'rgba(255,255,255,0.2)', 
                border: '1px solid rgba(255,255,255,0.3)',
                color: 'white'
              }}
            >
              Explore Sunset
            </Button>
          </div>
        </div>
      </TabContent>
    </Tabs>
  );
}
```

### Nested Tab Content

```tsx
import { Tabs, TabItem, TabContent, Text } from '@delightui/components';

function NestedTabContentExample() {
  return (
    <Tabs>
      <div>
        <TabItem value="products" defaultTab>Products</TabItem>
        <TabItem value="services">Services</TabItem>
        <TabItem value="support">Support</TabItem>
      </div>
      
      <TabContent value="products">
        <div style={{ padding: '20px' }}>
          <h2>Our Products</h2>
          <Tabs style="Underlined">
            <div>
              <TabItem value="software" defaultTab>Software</TabItem>
              <TabItem value="hardware">Hardware</TabItem>
              <TabItem value="accessories">Accessories</TabItem>
            </div>
            
            <TabContent value="software">
              <div style={{ padding: '20px' }}>
                <h3>Software Solutions</h3>
                <Text>Explore our comprehensive range of software products designed to streamline your workflow.</Text>
                <ul style={{ marginTop: '16px' }}>
                  <li>Project Management Suite</li>
                  <li>Analytics Dashboard</li>
                  <li>Customer Relations Manager</li>
                  <li>Inventory Tracking System</li>
                </ul>
              </div>
            </TabContent>
            
            <TabContent value="hardware">
              <div style={{ padding: '20px' }}>
                <h3>Hardware Products</h3>
                <Text>Discover our high-quality hardware solutions built for performance and reliability.</Text>
                <ul style={{ marginTop: '16px' }}>
                  <li>Industrial Computers</li>
                  <li>Network Equipment</li>
                  <li>Storage Solutions</li>
                  <li>Monitoring Devices</li>
                </ul>
              </div>
            </TabContent>
            
            <TabContent value="accessories">
              <div style={{ padding: '20px' }}>
                <h3>Accessories</h3>
                <Text>Complete your setup with our range of professional accessories and add-ons.</Text>
                <ul style={{ marginTop: '16px' }}>
                  <li>Cables and Adapters</li>
                  <li>Mounting Hardware</li>
                  <li>Protective Cases</li>
                  <li>Replacement Parts</li>
                </ul>
              </div>
            </TabContent>
          </Tabs>
        </div>
      </TabContent>
      
      <TabContent value="services">
        <div style={{ padding: '20px' }}>
          <h2>Our Services</h2>
          <Text>We provide comprehensive services to support your business needs.</Text>
        </div>
      </TabContent>
      
      <TabContent value="support">
        <div style={{ padding: '20px' }}>
          <h2>Customer Support</h2>
          <Text>Get help when you need it with our dedicated support team.</Text>
        </div>
      </TabContent>
    </Tabs>
  );
}
```