<div class="w-full">
    <div
      class="h-48"
      x-init="$el._x_quill = new Quill($el,{
              modules : {
                toolbar: [
                  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                  ['blockquote', 'code-block'],
                  [{ header: 1 }, { header: 2 }], // custom button values
                  [{ list: 'ordered' }, { list: 'bullet' }],
                  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
                  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
                  [{ direction: 'rtl' }], // text direction
                  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
                  [{ header: [1, 2, 3, 4, 5, 6, false] }],
                  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                  [{ font: [] }],
                  [{ align: [] }],
                  ['clean'], // remove formatting button
                ],
              },
              placeholder: 'Enter your content...',
              theme: 'snow',
            })"
    ></div>
  </div>
                
              

                
  <div
    class="h-48"
    x-init="$el._x_quill = new Quill($el,{
          modules : {
            toolbar: [
              ['bold', 'italic', 'underline'],
              [
                { list: 'ordered' },
                { list: 'bullet' },
                { header: 1 },
                { background: [] },
              ],
            ],
          },
          placeholder: 'Enter your content...',
          theme: 'snow',
        })"
  ></div>

                
              

                
  <div class="ql-header-filled w-full">
    <div
      class="h-48"
      x-init="$el._x_quill = new Quill($el,{
              modules : {
                toolbar: [
                  ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                  ['blockquote', 'code-block'],
                  [{ header: 1 }, { header: 2 }], // custom button values
                  [{ list: 'ordered' }, { list: 'bullet' }],
                  [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
                  [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
                  [{ direction: 'rtl' }], // text direction
                  [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
                  [{ header: [1, 2, 3, 4, 5, 6, false] }],
                  [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                  [{ font: [] }],
                  [{ align: [] }],
                  ['clean'], // remove formatting button
                ],
              },
              placeholder: 'Enter your content...',
              theme: 'snow',
            })"
    ></div>
  </div>
                
              

                
  <div class="ql-header-filled w-full">
    <div
      class="h-48"
      x-init="$el._x_quill = new Quill($el,{
                modules:{
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
                        [{ color: [] }, { background: [] }],
                        ['clean'],
                    ]
                },
                placeholder: 'Enter your content...',
                theme: 'snow',
            })"
    ></div>
  </div>