Table

Snippet #1

Name Department
Deandre Kellner
deandrekellner@coach.com
Designer
Babara Clifford
babaraclifford@coach.com
Front End Developer
Mac Spradling
macspradling@coach.com
Editor
Deedee Song
deedeesong@coach.com
Editor
Toney Crews
toneycrews@coach.com
Editor
Cassondra Reisch
cassondrareisch@coach.com
Editor 
<div class="card rounded-3">
<div class="table-responsive border-0">
	<table class="table mb-0 text-nowrap">
		<thead class="bg-light">
			<tr>
				<th scope="col" class="py-2 border-bottom-0">Name</th>
				<th scope="col" class="py-2 border-bottom-0">Department</th>

				<th scope="col" class="py-2 border-bottom-0"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-1.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Deandre Kellner</h5>
						<span class="font-12">deandrekellner@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Designer</td>
				<td class="align-middle p-3">
					<label for="selectDesigner" class="form-label visually-hidden">Designer</label>
					<select class="form-select" id="selectDesigner" name="selectDesigner">
						<option selected="">Admin</option>
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-2.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Babara Clifford</h5>
						<span class="font-12">babaraclifford@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Front End Developer</td>
				<td class="align-middle p-3">
					<label for="selectDeveloper" class="form-label visually-hidden">Designer</label>
					<select class="form-select" id="selectDeveloper" name="selectDeveloper">
						<option selected="">User</option>
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-3.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Mac Spradling</h5>
						<span class="font-12">macspradling@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Editor</td>
				<td class="align-middle p-3">
					<label for="selectEditor" class="form-label visually-hidden">Editor</label>
					<select class="form-select" id="selectEditor" name="selectEditor">
						<option selected="">Editor</option>
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-5.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Deedee Song</h5>
						<span class="font-12">deedeesong@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Editor</td>
				<td class="align-middle p-3">
					<label for="selectEditorOne" class="form-label visually-hidden">Editor</label>
					<select class="form-select" id="selectEditorOne" name="selectEditorOne">
						<option selected="">Editor</option>
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-6.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Toney Crews</h5>
						<span class="font-12">toneycrews@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Editor</td>
				<td class="align-middle p-3">
					<label for="selectEditorTwo" class="form-label visually-hidden">Editor</label>
					<select class="form-select" id="selectEditorTwo" name="selectEditorTwo">
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
			<tr>
				<td class="align-middle d-flex align-items-center p-3">
					<img src="../assets/images/avatar-7.png" alt="" class="rounded-circle avatar-lg" />
					<div class="ms-3 lh-1">
						<h5 class="mb-0">Cassondra Reisch</h5>
						<span class="font-12">cassondrareisch@coach.com</span>
					</div>
				</td>
				<td class="align-middle p-3">Editor</td>
				<td class="align-middle p-3">
					<label for="selectEditorThree" class="form-label visually-hidden">Editor</label>
					<select class="form-select" id="selectEditorThree" name="selectEditorThree">
						<option value="Front End Developer">Front End Developer</option>
						<option value="Editor">Editor</option>
						<option value="User">User</option>
						<option value="Admin">Admin</option>
					</select>
				</td>
			</tr>
		</tbody>
	</table>
</div>
</div>

Snippet #2

Payment History

ID DATE PAYMENT-METHOD AMOUNT RECEIPT
e5BZptmrBl 2024-12-07 American Express ending in 1234 $5.00
4aS1taQR4F 2024-11-07 American Express ending in 1234 $5.00
jnUIsm4j5E 2024-10-07 American Express ending in 1234 $5.00
NPigkt3dxj 2024-09-07 American Express ending in 1234 $5.00
xzxxGXcIqk 2024-09-07 American Express ending in 1234 $5.00
cvll5njW1r 2024-09-07 American Express ending in 1234 $5.00 
<div class="card rounded-3 mb-4 ">
<div class="card-header bg-white p-4 border-bottom-0">
   <h3 class="mb-0 h4">Payment History</h3>
</div>
<div class="">
   <div class="table-responsive border-0">
      <table class="table mb-0 text-nowrap ">
         <thead class="bg-light ">
            <tr>
<th scope="col" class="py-2 border-bottom-0">ID</th>
<th scope="col" class="py-2 border-bottom-0">DATE</th>
<th scope="col" class="py-2 border-bottom-0">PAYMENT-METHOD</th>
<th scope="col" class="py-2 border-bottom-0">AMOUNT</th>
<th scope="col" class="py-2 border-bottom-0"> RECEIPT</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
   e5BZptmrBl
</td>
<td class="align-middle">2024-12-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
<tr>
<td class="align-middle">
   4aS1taQR4F
</td>
<td class="align-middle">2024-11-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
<tr>
<td class="align-middle">
   jnUIsm4j5E
</td>
<td class="align-middle">2024-10-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
<tr>
<td class="align-middle">
   NPigkt3dxj
</td>
<td class="align-middle">2024-09-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
<tr>
<td class="align-middle">
   xzxxGXcIqk
</td>
<td class="align-middle">2024-09-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
<tr>
<td class="align-middle">
   cvll5njW1r
</td>
<td class="align-middle">2024-09-07</td>
<td class="align-middle">American Express ending in 1234</td>
<td class="align-middle">$5.00</td>
<td class="align-middle"><a href="#"><i class="fe fe-download"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Snippet #3

Employee Salary
John Saddington $12 Because that’s all Steve Job’ needed for a salary.
Tom McFarlin $100K For all the blogging he does.
Jared Erickson $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Chris Ames $100B With hair like that?! Enough said… 
<table class="table table-bordered">
<thead>
   <tr>
      <th scope="col" class="w-25">Employee</th>
      <th scope="col" class="w-25">Salary</th>
      <th scope="col"></th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>John Saddington</td>
      <td>$12</td>
      <td>Because that’s all Steve Job’ needed for a salary.</td>
   </tr>
   <tr>
      <td>Tom McFarlin</td>
      <td>$100K</td>
      <td>For all the blogging he does.</td>
   </tr>
   <tr>
      <td>Jared Erickson</td>
      <td>$100M</td>
      <td>
         Pictures are worth a thousand words, right? So Tom x
         1,000.
      </td>
   </tr>
   <tr>
      <td>Chris Ames</td>
      <td>$100B</td>
      <td>With hair like that?! Enough said…</td>
   </tr>
</tbody>
</table>