# Practical Examples for Modern Web Development

## Alpine.js Examples

### 1. Toggle Menu
```html
<div x-data="{ open: false }">
    <button @click="open = !open" class="btn btn-primary">
        <span x-text="open ? 'Close Menu' : 'Open Menu'"></span>
    </button>
    
    <div x-show="open" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 transform scale-95"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-95"
         class="mt-2">
        <ul class="space-y-2">
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Home</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">About</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Contact</a></li>
        </ul>
    </div>
</div>
```

### 2. Form Validation
```html
<div x-data="{ 
    email: '',
    password: '',
    errors: {},
    validate() {
        this.errors = {};
        if (!this.email) this.errors.email = 'Email is required';
        if (!this.password) this.errors.password = 'Password is required';
        return Object.keys(this.errors).length === 0;
    }
}">
    <form @submit.prevent="if(validate()) submitForm()">
        <div class="mb-4">
            <label class="block text-gray-700">Email</label>
            <input type="email" 
                   x-model="email"
                   class="form-input mt-1 block w-full"
                   :class="{ 'border-red-500': errors.email }">
            <p x-show="errors.email" x-text="errors.email" class="text-red-500 text-sm mt-1"></p>
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700">Password</label>
            <input type="password" 
                   x-model="password"
                   class="form-input mt-1 block w-full"
                   :class="{ 'border-red-500': errors.password }">
            <p x-show="errors.password" x-text="errors.password" class="text-red-500 text-sm mt-1"></p>
        </div>
        
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
```

## Livewire Examples

### 1. Real-time Search
```php
// app/Http/Livewire/SearchUsers.php
class SearchUsers extends Component
{
    public $search = '';
    
    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('name', 'like', '%' . $this->search . '%')
                          ->orWhere('email', 'like', '%' . $this->search . '%')
                          ->get()
        ]);
    }
}
```

```php
<!-- resources/views/livewire/search-users.blade.php -->
<div>
    <input type="text" 
           wire:model.debounce.300ms="search"
           class="form-input w-full"
           placeholder="Search users...">
    
    <div class="mt-4">
        @foreach($users as $user)
            <div class="p-4 bg-white rounded-lg shadow mb-2">
                <h3 class="font-bold">{{ $user->name }}</h3>
                <p class="text-gray-600">{{ $user->email }}</p>
            </div>
        @endforeach
    </div>
</div>
```

### 2. Dynamic Form
```php
// app/Http/Livewire/DynamicForm.php
class DynamicForm extends Component
{
    public $fields = [];
    
    public function addField()
    {
        $this->fields[] = [
            'type' => 'text',
            'label' => 'New Field',
            'value' => ''
        ];
    }
    
    public function removeField($index)
    {
        unset($this->fields[$index]);
        $this->fields = array_values($this->fields);
    }
    
    public function render()
    {
        return view('livewire.dynamic-form');
    }
}
```

```php
<!-- resources/views/livewire/dynamic-form.blade.php -->
<div>
    <button wire:click="addField" class="btn btn-primary mb-4">
        Add Field
    </button>
    
    @foreach($fields as $index => $field)
        <div class="flex gap-2 mb-4">
            <input type="{{ $field['type'] }}"
                   wire:model="fields.{{ $index }}.value"
                   class="form-input flex-1"
                   placeholder="{{ $field['label'] }}">
            <button wire:click="removeField({{ $index }})"
                    class="btn btn-danger">
                Remove
            </button>
        </div>
    @endforeach
</div>
```

## Tailwind CSS Examples

### 1. Card Component
```html
<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://via.placeholder.com/400x200" alt="Card image">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2">Card Title</div>
        <p class="text-gray-700 text-base">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
    </div>
    <div class="px-6 pt-4 pb-2">
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #tag1
        </span>
        <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
            #tag2
        </span>
    </div>
</div>
```

### 2. Responsive Navigation
```html
<nav class="bg-white shadow-lg">
    <div class="max-w-6xl mx-auto px-4">
        <div class="flex justify-between">
            <div class="flex space-x-7">
                <div>
                    <a href="#" class="flex items-center py-4">
                        <span class="font-semibold text-gray-500 text-lg">Logo</span>
                    </a>
                </div>
                
                <!-- Primary Navbar items -->
                <div class="hidden md:flex items-center space-x-1">
                    <a href="#" class="py-4 px-2 text-blue-500 border-b-4 border-blue-500">Home</a>
                    <a href="#" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">About</a>
                    <a href="#" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">Services</a>
                    <a href="#" class="py-4 px-2 text-gray-500 hover:text-blue-500 transition duration-300">Contact</a>
                </div>
            </div>
            
            <!-- Mobile menu button -->
            <div class="md:hidden flex items-center">
                <button class="outline-none mobile-menu-button">
                    <svg class="w-6 h-6 text-gray-500 hover:text-blue-500"
                         fill="none"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                         stroke-width="2"
                         viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    
    <!-- Mobile menu -->
    <div class="hidden mobile-menu">
        <ul class="">
            <li><a href="#" class="block text-sm px-2 py-4 text-white bg-blue-500 font-semibold">Home</a></li>
            <li><a href="#" class="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300">About</a></li>
            <li><a href="#" class="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300">Services</a></li>
            <li><a href="#" class="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300">Contact</a></li>
        </ul>
    </div>
</nav>
```

## Advanced CSS Examples

### 1. Glassmorphism Effect
```css
.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
```

### 2. Custom Scrollbar
```css
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
```

### 3. Animated Gradient Background
```css
.animated-gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
```

### 4. Card Hover Effect
```css
.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
```

## Bootstrap Examples

### 1. Modal Dialog
```html
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
```

### 2. Carousel
```html
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>
```

## Inertia.js Examples

### 1. User List with Search
```jsx
// resources/js/Pages/Users/Index.jsx
import { useState } from 'react';
import { Head } from '@inertiajs/react';

export default function Index({ users }) {
    const [search, setSearch] = useState('');
    
    const filteredUsers = users.filter(user => 
        user.name.toLowerCase().includes(search.toLowerCase()) ||
        user.email.toLowerCase().includes(search.toLowerCase())
    );
    
    return (
        <>
            <Head title="Users" />
            
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">
                            <input
                                type="text"
                                value={search}
                                onChange={e => setSearch(e.target.value)}
                                placeholder="Search users..."
                                className="form-input w-full mb-4"
                            />
                            
                            <div className="grid grid-cols-1 gap-4">
                                {filteredUsers.map(user => (
                                    <div key={user.id} className="p-4 bg-gray-50 rounded-lg">
                                        <h3 className="font-bold">{user.name}</h3>
                                        <p className="text-gray-600">{user.email}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}
```

### 2. Form with Validation
```jsx
// resources/js/Pages/Users/Create.jsx
import { useForm } from '@inertiajs/react';
import { useState } from 'react';

export default function Create() {
    const { data, setData, post, processing, errors } = useForm({
        name: '',
        email: '',
        password: '',
        password_confirmation: '',
    });
    
    const handleSubmit = (e) => {
        e.preventDefault();
        post(route('users.store'));
    };
    
    return (
        <form onSubmit={handleSubmit} className="max-w-md mx-auto mt-8">
            <div className="mb-4">
                <label className="block text-gray-700 text-sm font-bold mb-2">
                    Name
                </label>
                <input
                    type="text"
                    value={data.name}
                    onChange={e => setData('name', e.target.value)}
                    className={`form-input w-full ${errors.name ? 'border-red-500' : ''}`}
                />
                {errors.name && (
                    <p className="text-red-500 text-xs mt-1">{errors.name}</p>
                )}
            </div>
            
            <div className="mb-4">
                <label className="block text-gray-700 text-sm font-bold mb-2">
                    Email
                </label>
                <input
                    type="email"
                    value={data.email}
                    onChange={e => setData('email', e.target.value)}
                    className={`form-input w-full ${errors.email ? 'border-red-500' : ''}`}
                />
                {errors.email && (
                    <p className="text-red-500 text-xs mt-1">{errors.email}</p>
                )}
            </div>
            
            <div className="mb-4">
                <label className="block text-gray-700 text-sm font-bold mb-2">
                    Password
                </label>
                <input
                    type="password"
                    value={data.password}
                    onChange={e => setData('password', e.target.value)}
                    className={`form-input w-full ${errors.password ? 'border-red-500' : ''}`}
                />
                {errors.password && (
                    <p className="text-red-500 text-xs mt-1">{errors.password}</p>
                )}
            </div>
            
            <div className="mb-4">
                <label className="block text-gray-700 text-sm font-bold mb-2">
                    Confirm Password
                </label>
                <input
                    type="password"
                    value={data.password_confirmation}
                    onChange={e => setData('password_confirmation', e.target.value)}
                    className="form-input w-full"
                />
            </div>
            
            <button
                type="submit"
                disabled={processing}
                className="btn btn-primary w-full"
            >
                Create User
            </button>
        </form>
    );
}
```