JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<script src="https://js.puter.com/v2/"></script>
<script src="https://js.puter.com/v2/"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Claude Chat (via Puter.js)</title>
    <script src="https://js.puter.com/v2/"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        header {
            background-color: #3f51b5;
            color: white;
            padding: 1rem;
            text-align: center;
        }

        #model-select {
            margin: 1rem;
            font-size: 1rem;
        }

        #chat {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
        }

        .message {
            margin-bottom: 1rem;
            padding: 0.75rem;
            border-radius: 10px;
            max-width: 80%;
        }

        .user {
            background-color: #d1eaff;
            align-self: flex-end;
            margin-left: auto;
        }

        .bot {
            background-color: #e0e0e0;
            align-self: flex-start;
            margin-right: auto;
        }

        #input-container {
            display: flex;
            padding: 1rem;
            border-top: 1px solid #ccc;
            background-color: #fff;
        }

        #user-input {
            flex: 1;
            padding: 0.75rem;
            font-size: 1rem;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        #send-button {
            padding: 0.75rem 1rem;
            margin-left: 1rem;
            font-size: 1rem;
            background-color: #3f51b5;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }
  ...